Question

我有2个单独的div，在点击时改变了背景img src，工作正常，但我希望它改变其现在的另一个图像。例如。 div 1被按下并变为＆＃34;打开＆＃34 ;,如果div2是＆＃34;打开＆＃34;它然后变得封闭。我的jQuery相当有限，它可以在可以改变图像的地方运行，但需要弄清楚如何应用＆＃34;关闭＆＃34;对尚未点击过的图片进行分类。理想情况下，它会使用attr（），以便稍后添加更多。

的jQuery

＆＃13;

$(".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();  
    });

＆＃13;

 .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;
    }

＆＃13;

<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>

＆＃13;

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以使您的“＆＃39;框＆＃39;元素也有一个封闭的＆＃39; class，所以你不要在＆＃39;框中重复/需要CSS背景属性。类。

请参阅this fiddle

尝试让jQuery在点击时更改不同的img src

2 个答案: