javascript - Toggle Image On-click 在 div 列表中使用 JavaScript/Jquery

Question

我是网络语言的新手，需要有关切换图像的帮助。

所以我有一个显示图像的 div 列表，图像的来源来自数据库。

我希望图像以某种方式切换，以将数据库中的 url 替换为同一数据库表中的另一个 url(例如，将 before_url 切换为 after_url)。

我尝试了几种方法，最接近的是点击一张图片，但它会更新所有元素。

下面的代码是我试过的(是的，我试图通过点击按钮来切换)

--

更新: 我找到了解决问题的方法。我为元素分配了单独的唯一 ID，因此在单击传递元素时，一次只能更改一个元素。

感谢那些尝试回答我问题的人，我真的很感激! :)

一些 CSS:

.card {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  padding: 16px;
}

.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

HTML:

<div class="row">
{% for c in card_list %}
    <div class="column">
        <div class="card">
          <img class="myCard_before" src="{{ c.img_url_before }}" style="width:100%;" />
          <img class="myCard_after" src="{{ c.img_url_after }}" style="width:100%;display:none" />
          <div class="container">
          <h4>{{ c.card_title }}</h4>
          <input class="button" type="button" onclick="changeImg1() "value="before" />
          <input class="button" type="button" value="after" />
        </div>
      </div>
    </div>
  {% endfor %}
</div>

JS:

<script>
  var elements = document.getElementsByClassName("card");
  console.log(elements);

  for(var i = 0; i < elements.length; i++) {
    elements[i].onclick = function(event) {
      this.classList.toggle('red');
      this.classList.toggle('myCard_afterEvol');
    }
  }

  function changeImg1() {
    for (var i = 0; i < elements.length; i++) {
      elements[i].onclick = function(event) {
        if(document.getElementById("myCard_before").style.display == "none") {
          document.getElementById("myCard_before").style.display = "";
          document.getElementById("myCard_after").style.display ="none";
        }
      }
    }
  }


</script>

我发现了一些与我希望代码的行为非常相似的东西，但我希望它在图像之间切换而不是 CSS 更改。

https://codepen.io/michaelhhdk/pen/pPyqmL?editors=0010

任何关于我应该看什么的帮助/建议都将不胜感激。谢谢!

Answer 1

尝试更新如下使用的js脚本

var container = document.getElementsByClassName("box");

for (var i = 0; i < container.length; i++) {
  //For each element in the container array, add an onclick event.
  container[i].onclick = function(event) {
	var newUrl = "https://google.com"; // Create new url
	$(this).attr("href", newUrl); // Set herf value
    this.classList.toggle('red');
  }
}

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
.box {
  background: #ddd;
  flex-basis: auto;
  flex-grow: 1;
  padding: 60px 0;
  text-align: center;
  border: 1px solid #ccc;
  cursor: pointer;
  transition: all 0.3s ease;
}
.red {
  background: IndianRed;
  padding: 80px 0;
  color: #fff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>