Question

我正在尝试在点击div时显示图像。

第一个是工作但第二个不工作。

到目前为止我尝试了什么，但它不起作用：

$('#review').click(function() {
  var src = $('#review').attr('src');
  $('#result').attr('src', src);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="review" src="http://web-images.chacha.com/aardvark/aardvark-may-9-2011-200.jpg" class="background-markup-center skew-15deg ro-buttons">
<p class="noskew-15deg text-center">John Doe</p>
</div>

<div id="review" src="http://web-images.chacha.com/aardvark/aardvark-may-9-2011-200.jpg" class="background-markup-center skew-15deg ro-buttons">
<p class="noskew-15deg text-center">Doe John</p>
</div>

<img id="result" />

Answer 1

id = name [CS]此属性为元素指定名称。这个名字必须在文档中是唯一的。

您已将id="review"用于两个元素。这是不可能的。

在函数中使用了this选择器。否则，将使用具有该类的第一个元素。

$('.review').click(function() {
  var src = $(this).attr('src');
  $('#result').attr('src', src);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="review" src="http://web-images.chacha.com/aardvark/aardvark-may-9-2011-200.jpg" class="background-markup-center skew-15deg ro-buttons">
  <p class="noskew-15deg text-center">John Doe</p>
</div>

<div class="review" src="http://web-images.chacha.com/aardvark/aardvark-may-9-2011-200.jpg" class="background-markup-center skew-15deg ro-buttons">
  <p class="noskew-15deg text-center">Doe John</p>
</div>

<img id="result" />

Answer 2

$('.review').click(function() {
  var src = $(this).attr('src');
  $('#result').attr('src', src);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="review" src="http://web-images.chacha.com/aardvark/aardvark-may-9-2011-200.jpg" class="background-markup-center skew-15deg ro-buttons">
<p class="noskew-15deg text-center">John Doe</p>
</div>

<div class="review" src="ad">
<p class="noskew-15deg text-center">Doe John</p>
</div>

<img id="result" />

使用类ID应该是唯一的
使用此上下文来引用click元素

Answer 3

Id应该是唯一的，在这种情况下使用类来选择

$('.review').click(function() {
  var src = $(this).attr('src');
  $('#result').attr('src', src);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div src="http://web-images.chacha.com/aardvark/aardvark-may-9-2011-200.jpg" class="background-markup-center review skew-15deg ro-buttons">
<p class="noskew-15deg text-center">John Doe</p>
</div>

<div src="https://images-na.ssl-images-amazon.com/images/G/01/img15/pet-products/small-tiles/23695_pets_vertical_store_dogs_small_tile_8._CB312176604_.jpg" class="background-markup-center review skew-15deg ro-buttons">
<p class="noskew-15deg text-center">Doe John</p>
</div>

<img id="result" />

Answer 4

为什么不让自己更容易，只需点击即可显示图片？

$(document).ready(function()
{
    $('div').on('click', function()
    {
        //make sure the click is being triggered
        console.log('I work');

        $('img').removeClass('hidden');
    });
});

在你的css中，刚刚用display：none;

创建了一个通用的隐藏类

这将在点击时显示img。您还可以使用if语句对其进行设置，以便在已经显示的情况下再次隐藏它（检测它具有哪个类.hasClass()）

Answer 5

ID应该是唯一的，但是如果你不能改变它，那么你可以使用如下的属性选择器作为id选择器返回第一个匹配元素！

＆＃13;

$("[id='review']").click(function() {
  var src = $(this).attr('src');
  $('#result').attr('src', src);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="review" src="http://web-images.chacha.com/aardvark/aardvark-may-9-2011-200.jpg" class="background-markup-center skew-15deg ro-buttons">
<p class="noskew-15deg text-center">John Doe</p>
</div>

<div id="review" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/37/Small-world-network-example.png/220px-Small-world-network-example.png" class="background-markup-center skew-15deg ro-buttons">
<p class="noskew-15deg text-center">Doe John</p>
</div>

<img id="result" />

＆＃13;

单击div时显示图像

5 个答案: