試圖讓jQuery在單擊時更改不同的img src

我有2個單獨的div可以在點擊時更改背景img src，但它可以正常工作，但是我希望它能夠更改當前的其他圖像。例如。 div 1被按下並變成「打開」，如果div2被「打開」，則它變爲關閉。我的jQuery是相當有限的，它可以改變圖像的功能，但需要弄清楚如何將「封閉」類應用到未被點擊的圖像上。理想情況下，它會使用attr（），以便稍後添加更多內容。試圖讓jQuery在單擊時更改不同的img src

jQuery的

$(".box").on("click", function() { 
 
     
 
     // need to make this function select the other div. 
 
     if ($(this).hasClass("closed")) { 
 
     $(this).addClass("open").removeClass("closed"); 
 
     } else { 
 
     $(this).addClass("closed").removeClass("open"); 
 
     } 
 
     
 
     var id = $(this).attr("data-id"); 
 
     $(this).toggleClass("open"); 
 
     $(".hideDivs").hide(); 
 
     $("#" + id).show(); 
 
    });

.container { 
 
     width: 640px; 
 
     height: 450px; 
 
     background-color: #eee; 
 
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); 
 
    } 
 
    
 
    .text-primary { 
 
     font-size: 14px; 
 
     text-align: center; 
 
     margin-bottom: 5px; 
 
    } 
 
    
 
    .box { 
 
     cursor: pointer; 
 
     width: 90px; 
 
     height: 180px; 
 
     display:block; 
 
     margin:auto; 
 
     background-image: url("http://res.cloudinary.com/dez1tdup3/image/upload/v1499052120/closed_vo1pn2.png"); 
 
    } 
 
    
 
    .open { 
 
     background-image: url("http://res.cloudinary.com/dez1tdup3/image/upload/v1499052120/open_ihcmuz.png"); 
 
    } 
 
    
 
    .closed { 
 
     background-image: url("http://res.cloudinary.com/dez1tdup3/image/upload/v1499052120/closed_vo1pn2.png"); 
 
    } 
 
    
 
    .hideDivs { 
 
     display: none; 
 
    } 
 
    
 
    .panel-body { 
 
     padding: 10px; 
 
     margin-top: 5px; 
 
    } 
 
    
 
    .title { 
 
     font-weight: bold; 
 
     font-size: 14px; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
     <div class="row"> 
 
     <div class="col-xs-6"> 
 
      <div class="box" data-id="divId1"> 
 
      </div> 
 
     </div> 
 
     <div class="col-xs-6"> 
 
      <div class="box" data-id="divId2"> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="row"> 
 
     <div class="col-xs-12"> 
 
      <div class="panel panel-default hideDivs" id="divId1"> 
 
      <div class="panel-body"> 
 
       <span class="title">Practices for safe packaging of cooked foods</span>   
 
       <ul> 
 
       <li>Label and date all food.</li> 
 
       <li>Package high-risk food in small batches for refrigeration and return to refrigerated storage as soon as possible (within 20 minutes).</li> 
 
       <li>Store packaging products in a clean environment and protect from contamination.</li> 
 
       </ul>   
 
      </div> 
 
      </div> 
 
      <div class="panel panel-default hideDivs" id="divId2"> 
 
      <div class="panel-body"> 
 
       <span class="title">Practices for safe freezing of cooked foods</span> 
 
       <ul> 
 
       <li>When packaging food for freezing, cover or wrap, label and date (production and freezing date) all foods.</li> 
 
       <li>Freeze food in small quantities to ensure food is frozen quickly.</li>    
 
       <li>Do not overload freezer units and ensure air can circulate.</li> 
 
       <li>Do not freeze foods that have been cooked then refrigerated and reheated.</li> 
 
       </ul> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div>

來源

2017-07-04 theHussle

請檢查的jsfiddle，讓我知道，如果你正在尋找這樣的事情。 https://jsfiddle.net/314sybno/2/

$(".box").on("click", function() { 
    var id = $(this).attr("data-id"); 
    if(id === 'divId1') { 
     $('div[data-id="divId2"]').addClass('closed').removeClass('open'); 
    } else { 
     $('div[data-id="divId1"]').addClass('closed').removeClass('open'); 
    } 

    // need to make this function select the other div. 
    if ($(this).hasClass("closed")) { 
     $(this).addClass("open").removeClass("closed"); 
    } else { 
     $(this).addClass("closed").removeClass("open"); 
    } 
    $(".hideDivs").hide(); 
    $("#" + id).show(); 
});

來源

2017-07-04 04:02:07 Shiladitya

這可能是一個更好的方法：

$(".box").on("click", function() { 
    // Hide all detail divs 
    $(".hideDivs").hide(); 

    if ($(this).is(".closed")) { 
     // Close other open boxes 
     $(".box.open").removeClass("open").addClass("closed"); 
     // Open this box and show the corresponding details div 
     $(this).removeClass("closed").addClass("open"); 
     var id = $(this).attr("data-id"); 
     $("#" + id).show(); 
    } else { 
     // Close this box 
     $(this).removeClass("open").addClass("closed"); 
    } 

});

另外，我建議改變你的HTML有你的「盒子」元素也有一個「封閉」類，所以你不重複/需要'box'類的CSS背景屬性。

看到它的工作this fiddle

來源

2017-07-04 04:24:44

試圖讓jQuery在單擊時更改不同的img src

回答

相關問題