Question

我正在建立一个带有wordpress和woocommerce的体育场座位表。当您点击地图上的座位时，我会显示一个弹出窗口。我需要的是弹出窗口匹配地图上的正确座位，所以如果我点击座位613，则显示613的弹出窗口。

弹出窗口显示有关数据库中的woocommerce产品的信息，我已经有了这个工作。

以下是我的代码

SVG地图中包含我想要匹配的ID的两个部分的示例。

<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的正确的woocommerce产品信息

<!-- 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，直到我意识到它无效，所以现在我需要匹配这些类。 get_attribute（＆＃34; section＆＃34;）将与地图上的id相同，例如613和614.

我已经更新了代码，它似乎获得了第一个弹出窗口但是就是这样。通过使用next，它只针对html输出中的一个。如何定位所有并找到与svg map id匹配的那个？

var position = $('g.available g').offset();
var popup = $('.popup');

popup.each(function(index){

  var id = this.id;
  var className = $('.popup > div').attr('class');
  var $match = $('g.available g[id^="'+id+'"]');

  $match.click(function(e){
    e.preventDefault();
      if($match.length && className.length){
        $(this).parent().parent().next().next().slideToggle('fast').css(position);
      }
    });
});

我也试过

$("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

单击多边形时可以获取多边形g id，并创建具有要显示的id的弹出div。

例如你的g id是：613，创建popid div，该id与任何名称相关联，如

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

content area

/ div>

当点击多边形时，您可以获得其父g属性ID并相应地显示弹出窗口。

$（“g，rect，path，line，circle”）。click（function（）{

var div_id = jQuery（this）.parent（）。attr（“id”）;

。

$（ “弹出”）隐藏（）;

$（ “＃popup_div _” + div_id）.show（）;

}）;

希望这对你有用。

如果这不起作用，请分享您遇到此问题的演示，以便我们查看并了解该过程并找到解决方案。

将id与类匹配以显示正确的弹出窗口

1 个答案: