Question

我想在不同的div点击上加载不同的图片。我如何知道点击了哪个div？我是否必须将div类作为参数传递？

    <script type="javascript">
    function ChangeLibaas() {

        
    }
    </script>

    <div class="Indeximages">
        <img src="images/white.png" id="libaasImage" class="img-responsive jubbahImage" alt="" />
    </div>

    <div class="col-md-12  nopadding customTabs">
        <h2>Pick a Colour</h2>
        <div class="col-md-3 colourBlue" onclick="ChangeLibaas()"></div>
        <div class="col-md-3 colourBlack" onclick="ChangeLibaas()"></div>
        <div class="col-md-3 colourGreen" onclick="ChangeLibaas()"></div>
    </div>

Answer 1

最简单的内联：传递（this）：

<div class="col-md-3 colourBlue" onclick="ChangeLibaas(this)"></div>

并使用它：

function ChangeLibaas(theClickedDiv) { 
   var img = "images/"+
     theClickedDiv.className.split("colour")[1].toLowerCase()+".png"; // take the colour
   document.getElementById("libaasImage").src=img;
}

要使它更整洁，请使用属性和不显眼的代码

window.onload=function() {
  var divs = document.querySelectorAll("div.col-md-3");
  for (var i=0;i<divs.length;i++) {
    divs[i].onclick=function() {
      document.getElementById("libaasImage").src="images/"+
        this.getAttribute("data-color")+".png";
    }
  }
}

使用

<div class="col-md-3 colourBlue" data-color="blue""></div>

Answer 2

你可以作为参数传递，如下：

<div class="col-md-12  nopadding customTabs">
    <h2>Pick a Colour</h2>
    <div class="col-md-3 colourBlue" onclick="ChangeLibaas(this)"></div>
    <div class="col-md-3 colourBlack" onclick="ChangeLibaas(this)"></div>
    <div class="col-md-3 colourGreen" onclick="ChangeLibaas(this)"></div>
</div>

然后：

<script type="javascript">
function ChangeLibaas(sender) {
    var div = sender;
}
</script>

但是如果你使用事件监听器会更好。

Answer 3

我希望它有用：

在你的HTML中

<div class="Indeximages">
    <img src="images/white.png" id="libaasImage" class="img-responsive jubbahImage" alt="" />
</div>

<div class="col-md-12  nopadding customTabs">
    <h2>Pick a Colour</h2>
    <button class="col-md-3" data-color="colourBlue" onclick="ChangeLibaas(this)">Blue</div>
    <button class="col-md-3" data-color="colourBlack" onclick="ChangeLibaas(this)">Black</div>
    <button class="col-md-3" data-color="colorGreen" onclick="ChangeLibaas(this)">Green</div>
</div>

在javascript中，代码如下：

function ChangeLibaas(origin) {
    var color = origin.dataset.color;
    var img = document.getElementById('libaasImage');
    img.src = color + ".jpg";
}

更改div上的图像onclick（）

3 个答案: