Question

我有动态生成的div，其内容包含锚链接和图像路径。

我还有一个带有图像标签的模态框。

我要做的是点击锚点链接，设置模态框中的图像标记路径。

目前我的代码所做的是无论我点击什么锚链接，它总是设置第一条路径链接的图像路径。

这是我的JSFiddle链接

我的代码：

            <div id="coupon-listing-items" class="shopping-listings listings">

    <div class="left-split">
     <a class="ads-links" title="Test Title One" href="http://www.test.com/"><h2>Test Title One</h2></a><div class="coupon-text">(Get 20% of by staying 2 nights)</div>
    <span id="sLink" class="hide">http://via.placeholder.com/350x250</span>
    </div>

        <div class="left-split">
     <a class="ads-links" title="Test Title Two" href="http://www.test.com/"><h2>Test Title Two</h2></a><div class="coupon-text"></div>
    <span id="sLink" class="hide">http://via.placeholder.com/400x350</span>
    </div> 

    </div>

    <!-- Modal Box -->
  <div class="modal CouponModal">
  <span class="close-modal">&times;</span>
  <div class="modal-content">
  <input type="button" class="btnprint" name="btnprint" value="Print This Coupon" onclick="PrintC('cp-image')"/>
  <div id="cp-image">
    <img id="coupon-image" />
    <div id="caption">
    <span class="vist">Visit the website: <a id="c-weblink"></a></span>
    </div>
  </div>
  </div>
</div>

$(".ads-links").each(function(index){

    $(".ads-links").on("click", function(e){
        e.preventDefault(); var imgsrc = document.getElementById('sLink')   
       $(".CouponModal").css('display', 'block'); 
       $("#coupon-image").attr('src',imgsrc.innerHTML);

    }); 
    $(".close-modal").click(function(e) { 
      $(".CouponModal").css('display', 'none');     
    });

});

如果单击测试标题1，您将在模式框中显示图像名称350x250，如果关闭模式框并现在单击测试标题2，则显示图像450x350只显示第一个图像。

我错过了什么？

谢谢并感谢

Answer 1

您正在选择第一个sLink，无论是哪个锚被点击。

var imgsrc = document.getElementById('sLink');

相反，您需要将其基于最靠近所点击锚点的sLink。

var imgsrc = $(this).parent().find('#sLink')[0];  
//This goes up a level and finds the sLink that is in that same parent//

注意

一个ID应该是唯一的，可能会引起你的一部分混淆，在这种情况下，一个类可能同样有用。
你的外环是多余的，可能会让你在路上遇到麻烦。

更新了你的小提琴：https://jsfiddle.net/0dmc9rvt/25/

Answer 2

$(".ads-links").each(function(index) {

    $(this).on("click", function(e) {
        e.preventDefault();
        debugger;
        $(".CouponModal").css('display', 'block');
        $("#coupon-image").attr('src', $(this).parent().find('.sLink').html());

    });
    $(".close-modal").click(function(e) {
        $(".CouponModal").css('display', 'none');
    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="coupon-listing-items" class="shopping-listings listings">
  <div class="left-split">
    <a class="ads-links" title="Test Title One" href="http://www.test.com/">
      <h2>Test Title One</h2>
    </a>
    <div class="coupon-text">(Get 20% of by staying 2 nights)</div>
    <span class="hide sLink">http://via.placeholder.com/350x250</span>
  </div>
  <div class="left-split">
    <a class="ads-links" title="Test Title Two" href="http://www.test.com/">
      <h2>Test Title Two</h2>
    </a>
    <div class="coupon-text"></div>
    <span class="hide sLink">http://via.placeholder.com/400x350</span>
  </div>
</div>
<!-- Modal Box -->
<div class="modal CouponModal">
  <span class="close-modal">&times;</span>
  <div class="modal-content">
    <input type="button" class="btnprint" name="btnprint" value="Print This Coupon" onclick="PrintC('cp-image')"/>
    <div id="cp-image">
      <img id="coupon-image" />
      <div id="caption">
        <span class="vist">Visit the website: <a id="c-weblink"></a></span>
      </div>
    </div>
  </div>
</div>

循环遍历每个锚点并使用jQuery在模态框中显示图像

2 个答案: