Question

对于更有经验的jQuery用户来说，这可能不会很难，但我一直都很难过。我在页面上有相关的div组。＃vendor-1＆amp; ＃vendor-1-content，＃vendor-2＆amp; ＃vendor-2-content等。

当用户点击＃vendor-1时，它会将#is-visible类添加到＃vendor-1-content。然后，他们可以通过删除.is-visible类来单击“关闭”内容的“x”。这是我的代码，只适用于一个div：

$('#vendor-1').click(function(){
  $('#vendor-1-content').addClass('is-visible');
});

$('#close').click(function(){
  $('.vendor-content').removeClass('is-visible');
});

我添加了以下代码，以便无论用户点击哪个ID，相应的内容ID都会获得类.is-visible。问题是#close部分仅适用于vendor-1-content。所有其他div都正常打开，但点击时不会关闭。

$(function (){
  $('[id^=vendor-]').click(function (){
    var num = this.id.split('vendor-')[1];
    var vendorId = '#vendor-' + num + '-content';

    $(vendorId).addClass('is-visible');

    $('#close').click(function() {
      $(vendorId).removeClass('is-visible');
    });
  });
});

为了使.is-visible从内容类中删除，我做错了什么？

我的html对于每个人都是这样的：

<div class="col-xs-12 col-sm-6 col-md-4 vendor-card" id="vendor-1">
    <img src="https://placeholdit.imgix.net/~text?txtsize=28&bg=0099ff&txtclr=ffffff&txt=300%C3%97300&w=300&h=300&fm=png" alt="">
    <div class="vendor-info">
      <h3>Vendor Name</h3>
      <p>Short Vendor Description</p>
    </div>
  </div>

<div class="vendor-content" id="vendor-1-content">
<div>
  <h2>Vendor title here</h2>
  <em>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt, ullam.</em>
  <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus. 
  </p>
</div>
<a href="#0" class="close-content cd-img-replace" id="close">close</a>
</div>

以下是代码的代码示例：http://codepen.io/Tambe257/pen/mPaZvw

Answer 1

我改变了一点你的逻辑，看看这个：

  <a class="vendor-click" data-id="1" href="javascript:void(0)">Vendor 1</a>
  <a class="vendor-click" data-id="2" href="javascript:void(0)">Vendor 2</a>
  <a class="vendor-click" data-id="3" href="javascript:void(0)">Vendor 3</a>
  <br/>
  <div id="vendor-content-1" class="vendor-content">content 1</div>
  <div id="vendor-content-2" class="vendor-content">content 2</div>
  <div id="vendor-content-3" class="vendor-content">content 3</div>
  <br/>
  <br/>

  <a id="close" data-id="1" href="javascript:void(0)">Close</a>

和JS：

  $(".vendor-content").hide();

  $("#close").on("click", function() {
    $(".vendor-content").hide();
  });

  $(".vendor-click").on("click", function() {
    var id = $(this).data("id");
    $(".vendor-content").hide();
    $("#vendor-content-" + id).show();
  });

Plunker：https://plnkr.co/edit/o9YFZ1KUvcVzGAvjn21L

Answer 2

检查此示例：

$(document).on('click', '[id^=vendor-]:not(.content)', function() {
  $('.content').removeClass('is-visible');
  $('[id="vendor-' + $(this).attr('id').split('-')[1] + '-content"]').addClass('is-visible');
});

$(document).on('click', '.closeContent', function(e) {
  console.log($(this).closest('.content').attr('id'));
  $(this).closest('.content').removeClass('is-visible');
});

.content:not(.is-visible) { display:none }
.content {
   padding:5px;
   bacground-color:#e1e1e1;
   border:1px solid #d8d8d8;
}
.closeContent { cursor:pointer;color:red;margin-left:10px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="vendor-1">Vendor #1</div>
<div id="vendor-2">Vendor #2</div>
<div id="vendor-3">Vendor #3</div>
<div id="vendor-1-content" class="content"><span>Vendor #1 content</span><span class="closeContent">x</span></div>
<div id="vendor-2-content" class="content"><span>Vendor #2 content</span><span class="closeContent">x</span></div>
<div id="vendor-3-content" class="content"><span>Vendor #3 content</span><span class="closeContent">x</span></div>

jQuery .removeClass不工作

2 个答案: