Question

我想缩短我的JQuery。我知道这可能是使用这个元素和孩子，但我不知道它是如何工作的？

基本上我有一个元素显示和隐藏点击。它们都具有相同的ID，只是一个不同的类。

如何实现这一目标？

这就是我的html的样子：

 <div id="spotparent">

  <div id="spot"  class="one" style="position: absolute; z-index: 103; width: 25px; height:25px;">
          <div id="ball"></div>
          <div id="pulse"></div>

          <div id="contentspot" class="one">
                    <img src="img/line-boost.png">

          </div>
        </div>

<div id="spot" class="two"  style="position: absolute; z-index: 103; width: 25px; height: 25px;">
          <div id="ball"></div>
          <div id="pulse"></div>

          <div id="contentspot" class="two">
                    <img src="img/line-tpu.png">

          </div>
        </div>

          <div id="spot"  class="three" style="position: absolute; z-index: 103; width: 25px; height:25px;">
          <div id="ball"></div>
          <div id="pulse"></div>

          <div id="contentspot" class="three">
                    <img src="img/line-wrap.png">

          </div>
        </div>

            <div id="spot"  class="four" style="position: absolute; z-index: 103; width: 25px; height:25px;">
          <div id="ball"></div>
          <div id="pulse"></div>

          <div id="contentspot" class="four">
                    <img src="img/line-support.png">

          </div>
        </div>

         <div id="spot"  class="five" style="position: absolute; z-index: 103; width: 25px; height:25px;">
          <div id="ball"></div>
          <div id="pulse"></div>

          <div id="contentspot" class="five">
                    <img src="img/line.png">

          </div>
        </div>

         <div id="spot"  class="six" style="position: absolute; z-index: 103; width: 25px; height:25px;">
          <div id="ball"></div>
          <div id="pulse"></div>

          <div id="contentspot" class="six">
                    <img src="img/line-knit.png">

          </div>
        </div>


         <div id="spot"  class="seven" style="position: absolute; z-index: 103; width: 25px; height:25px;">
          <div id="ball"></div>
          <div id="pulse"></div>

          <div id="contentspot" class="seven">
                    <img src="img/line-signature.png">

          </div>
        </div>

      </div>

重点在于点击点ID，id＆＃39; contentspot＆＃39; show（通过切换将显示从none更改为block的类）。

为此我使用以下JQuery：

$('#spot.one').click(function() {
             // if($('.hide').hasClass('test')){

  $('#contentspot.one').toggleClass('showcontent');

});


$('#spot.two').click(function() {
             // if($('.hide').hasClass('test')){

  $('#contentspot.two').toggleClass('showcontent');

});

$('#spot.three').click(function() {
             // if($('.hide').hasClass('test')){

  $('#contentspot.three').toggleClass('showcontent');

});

$('#spot.four').click(function() {
             // if($('.hide').hasClass('test')){

  $('#contentspot.four').toggleClass('showcontent');

});

$('#spot.five').click(function() {
             // if($('.hide').hasClass('test')){

  $('#contentspot.five').toggleClass('showcontent');

});

$('#spot.six').click(function() {
             // if($('.hide').hasClass('test')){

  $('#contentspot.six').toggleClass('showcontent');

});

$('#spot.seven').click(function() {
             // if($('.hide').hasClass('test')){

  $('#contentspot.seven').toggleClass('showcontent');

});

所以它一直在重复。

我确定可以将所有这些代码分成两行，如果有人能解释我理解的过程，那就太棒了！

感谢您的时间。

Answer 1

首先，您应该采用@ empiric的建议，每页最多只使用一次id。 id应该是一个唯一的属性，不能重复使用。我建议使用类似元素的class属性

<div id="spots">

  <div class="spot" style="position: absolute; z-index: 103; width: 25px; height:25px;">
    <div class="ball"></div>
    <div class="pulse"></div>

    <div class="content">
      <img src="img/line-boost.png">
    </div>
  </div>

  <!-- more spots... -->

</div>

然后你可以编写你的jQuery函数，以便在点击class="spot"的元素时运行

<script>
  $('#spots .spot').on('click', function() {
    $(this) //this refers to the clicked element, our .spot
      .find('.content')  //select child elements with class 'content'
      .toggleClass('showcontent');
  });
</script>

让我的jquery缩短？

1 个答案: