Question

我正在使用一段简单的JS来将div中的图像从加号更改为零。我在这个页面上有多个div，它们是动态生成的。我怎么能专门更改被点击的div上的符号。目前我对每个div都有相同的类。这意味着每当我单击任何div时，只会更改第一个div图像，而不是单击的div。

<div class="hover2 opacity" onclick="changeImage()">
     <h3><a>Test</a></h3>

    <div class="layer1">
        <p class="heading">view <span class="s-right"><img id="myImage"  src="img/plus.svg" width="20" height="20"></span>
            <br>more</p>
        <div class="content">hello</div>
    </div>
    <br>
</div>

<div class="hover2 opacity" onclick="changeImage()">
     <h3><a>Test</a></h3>

    <div class="layer1">
        <p class="heading">view <span class="s-right"><img id="myImage"  src="img/plus.svg" width="20" height="20"></span>
            <br>more</p>
        <div class="content">hello</div>
    </div>
    <br>
</div>

JS

function changeImage() {
    var image = document.getElementById('myImage');
    if (image.src.match("plus")) {
        image.src = "img/minus.svg";
    } else {
        image.src = "img/plus.svg";
    }
}

解决此问题的唯一方法是为每个div动态分配新类并为教类生成多个脚本吗？

编辑：

我使用的方法和以前一样，但布局略有不同。有什么理由不起作用吗？

<div class="open-link" style="display: block;">
     <a href="#" class="img-change">
         <p class="inner">Expand <br><img id="myImage"  src="img/arrow-down.svg" width="20" height="20"></p>
     </a>
</div>

JS

$(document).on('click','a.img-change',function(){
    var $img = $(this).find('p.inner');
    if($img.attr('src').match("down"))
        $img.attr('src','img/arrow-up.svg');
    else
        $img.attr('src','img/arrow-down.svg')
});

Answer 1

标记中的每个img都具有相同的ID，这很糟糕，所有元素（如果有ID）都应该是唯一的。这并不意味着您应该在每个图像上使用唯一ID，并为每个按钮使用特定脚本！那会很糟糕。只需删除重复的ID即可！

然后这很简单，使用jQuery将点击事件附加到每个div并查找其中的图像

取消内联onclick

<div class="hover2 opacity">

并使用jQuery

$(document).on('click','div.hover2',function(){
    var $img = $(this).find('p.heading img');
    if($img.attr('src').match("plus"))
        $img.attr('src','img/minus.svg');
    else
        $img.attr('src','img/plus.svg')
});

Answer 2

您无需为<img/>元素

分配ID

HTML

<div class="hover2 opacity" onclick="changeImage(this)">
    <h3><a>Test</a></h3>
    <div class="layer1">
        <p class="heading">view 
            <span class="s-right">
                <img src="img/plus.svg" width="20" height="20">
            </span>
            <br>more</p>
        <div class="content">hello</div>
    </div>
    <br>
</div>

JS

function changeImage(el){
    var img = el.querySelector('span > img');
    img.src = (img.src.match("plus")) ? "img/minus.svg" : "img/plus.svg";
}

Answer 3

你可以试试这个：

$(document).ready(function() {
  $(".opacity").on("click", function() {

    var source = $(this).find("img").attr("src"); // Gives source of image inside the presently clicked div
    console.log(source);
    if (source.match("plus")) {
      console.log("match");
      $(this).find("img").attr("src", "img/minus.svg");
    } else {
      $(this).find("img").attr("src", "img/plus.svg");
    }
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="hover2 opacity">
  <h3><a>Test</a></h3>

  <div class="layer1">
    <p class="heading">view <span class="s-right"><img id="myImage"  src="img/plus.svg" width="20" height="20"></span>
      <br>more</p>
    <div class="content">hello</div>
  </div>
  <br>
</div>

<div class="hover2 opacity">
  <h3><a>Test</a></h3>

  <div class="layer1">
    <p class="heading">view <span class="s-right"><img id="myImage"  src="img/plus.svg" width="20" height="20"></span>
      <br>more</p>
    <div class="content">hello</div>
  </div>
  <br>
</div>

Answer 4

你仍然可以使用$(this).find('img')为所选div找到img并更改src。

实施例

<div class="layer1">
        <p class="heading">view <span class="s-right"><img id="myImage1" class="myImage" src="img/plus.svg" width="20" height="20"></span>
            <br>more</p>
        <div class="content">hello</div>
    </div>

<div class="layer1">
        <p class="heading">view <span class="s-right"><img id="myImage2" class="myImage" src="img/plus.svg" width="20" height="20"></span>
            <br>more</p>
        <div class="content">hello</div>
    </div>

所以你的javascript，你可以使用这个

$(document).on('click','div.hover2',function(){
    $(this).find('img').attr("src","img/minus.svg");
}

Jsfiddle链接 - ＆gt; https://jsfiddle.net/w1yb5fcc/1/

定位特定div以更新图像

4 个答案: