[英]Toggle Image On-click Using JavaScript/Jquery in list of divs
我是網絡語言的新手,需要有關切換圖像的幫助。
因此,我有一個顯示圖像的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
任何對我應該看的幫助/建議,將不勝感激。 謝謝!
嘗試更新如下使用的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>
您可能可以在onClick事件中使用$(this)更改特定元素。 檢查以下
<input class="button" type="button" onclick="changeImg1(this) "value="before" />
function changeImg1(ele) {
if($(ele).style.display == "none") {
$(ele).style.display = "";
$(ele).style.display ="none";
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.