簡體   English   中英

在div列表中單擊使用JavaScript / jQuery來單擊圖像

[英]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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM