正しいポップアップを表示するクラスと一致するID

Question

私はワードプレスとwoocommerceでスタジアム座席図を作成しています。地図上の座席をクリックするとポップアップが表示されます。私が必要とするのは、ポップアップが地図上の正しい座席と一致することです。座席613をクリックすると、613のポップアップが表示されます。

ポップアップには、データベースからのwoocommerce製品に関する情報が表示されています。私は既にこの機能を持っています。ここで

この

I照合するIDを含んでSVGマップ内の二つのセクションの例については、私が持っているコードです。

<g id="Skye_Terrace" class="available"> 
    <g id="613" class="section"> 
     <polygon points=" 82.2 453.2 153.4 426.4 216.5 481.4 146.6 506.9 " class="a"></polygon> 
     <text transform="matrix(0.99915 -0.04114 0.04114 0.99915 128.9282227 474.7163086)" class="myriad" font-size="28.1989803">613</text> 
    </g> 
    <g id="614" class="section"> 
     <polygon points=" 232.6 395.5 291.7 450.5 216.5 481.4 153.4 426.4 " class="a"></polygon> 
    </g> 
</g> 

私は私まで、IDを一致させようとするために作成さ

<!-- Popup for ticket information --> 
     <div class="popup myriadGlobal <?php echo $product->get_attribute('section'); ?>" id="<?php echo $product->get_attribute('section'); ?>"> 
      <figure> 
      <img src="<?php echo plugins_url('images/sample.jpg', __FILE__); ?>" alt=""><img src="<?php echo plugins_url('images/sample.jpg', __FILE__); ?>" alt=""> 
      </figure> 
      <div class="wrapper"> 
      <div class="col_two"> 
       <section> 
        <header> 
        <h2>Section <?php echo $product->get_attribute('section'); ?></h2> 
        <h3 id="row">Row 
         <select name="row" id="selectRow"> 
          <?php foreach ($rows as $row) { echo "<option>" . $row->name . "</option>"; } ?> 
         </select> 
        </h3> 
        </header> 
       </section> 

jQueryのマッチングマップセクションまたはIDの正しいwoocommerce製品情報をクリックの上に表示されるはずですポップアップの例それが有効ではないことが分かったので、クラスに合わせる必要があります。 get_attribute（ "section"）はマップ上のidと同じです（例えば613と614）。

最初のポップアップが表示されているようですが、それだけです。次は、html出力で1つだけを対象としています。 allをターゲットにして、svg map idと一致するものを見つけるにはどうすればよいですか？

​​3210

私も、私もこの記事に従うことを試みた

$("g,rect,path,line,circle").click(function() { 
     var classname = $(this).attr("id"); 
     $(".popup").hide(); 
     $("."+classname).show(); 
    }); 

を試してみた：Match incremented class with incremented ids from different loops [jQuery/Wordpress]

がうまくいけば、これは十分な情報です。私は何らかの理由でこれを達成するのに失敗しました...コーダーがブロックしていますか？笑

例

私はこのコード

if .614 == #614 { 
     display the_content() 
    } 

を言う部分が欠落していますので、私はそれが右のポップアップを示していない理由はわからないんだけど、真出てきます。

$('g.available g').click(function(e) { 
      e.preventDefault(); 
      var id = $(this).attr('id'); 
      var className = $('.popup').hasClass(id); 
     alert(className); 
     }); 

Answer 1

ポリゴンをクリックして表示するようにそのIDでポップアップdiv要素を作成するときには、ポリゴングラムIDを取得することができます。

たとえば、あなたのグラムIDです：613、ポリゴン上のクリックはあなたが彼の親グラムの属性IDを取得し、それに応じてポップアップを表示することができた場合よりも

 
div id="popup_div_613" class="popup"> 

content area 

/div> 

のような任意の名前と、そのIDを関連付けるとポップアップdiv要素を作成します。

$（ "G、RECT、経路、ライン、円"）（関数（）{

VAR div_id = jQueryの（この）.parent（）ATTR（ "ID"）をクリック;

$（ "ポップアップ"）。hide（）;

$（ "＃popup_div _" + div_id）。show（）;

}）;

あなたのためにこの作品がほしいと思っています。

これが機能しない場合は、この問題が発生しているデモを共有してください。プロセスを確認して理解し、解決策を見つけることができます。 :(動作しませんでした