循环遍历每个锚点，然后使用jQuery在模式框中显示图像

Question

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

我也有一个带有图像标签的模式框。

我想做的是锚链接的onclick，在模式框中设置图像标签路径。

当前，无论单击什么锚链接，我的代码都将执行操作，它始终将图像路径设置为第一个路径链接。

这是我的JSFiddle链接

的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');     
    });

});

如果单击测试标题一，您将在模式框中显示图像名称350x250，如果您关闭模式框，然后单击测试标题二，则显示图像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>