试图让jQuery在单击时更改不同的img src

Question

我有 2 个单独的 div，它们在单击时会更改背景 img src，效果很好，但我希望它可以更改当前的另一个图像。例如。 div 1 被按下并变为“打开”，如果 div2 为“打开”，则它变为关闭。我的 jQuery 相当有限，它可以在可以更改图像的地方运行，但需要弄清楚如何将“关闭”类应用于尚未单击的图像。理想情况下，它会使用 attr()，这样我以后可以添加更多。

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>

Answer 1

请检查 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();  
});

Answer 2

这可能是更好的方法：

$(".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，让您的“盒子”元素也有一个“封闭”类，这样您就不需要在“盒子”类上重复/需要 CSS 背景属性。

看到它在this fiddle上工作