添加和删​​除类jQuery

时间：2016-09-21 15:43:17

标签： javascript jquery

我正在显示新闻帖子的预览，当用户点击阅读更多（或实际上是整个div）时，它应该以全屏方式打开。它做的。但是当我试图关闭它时，它不起作用。就像它不想再次删除课程一样。

TL; DR： 第二个功能的点击事件不会执行。

这是我的代码：

/* NEWS */
$('.news-entry').on('click', function() {
  $(this).addClass('open');
  $(this).find('.close-btn').addClass('display-close-btn');
  $(this).find('.news-all-text').addClass('display-all-text');
  $(this).find('.news-text').removeClass('news-read-more');
  $('html, body').animate({
    scrollTop: $(this).find(".scrollTo").offset().top - 20
  }, 600);
});

/* NEWS CLOSE BTN */
$('.close-btn').on('click', function() {
  $('.news-entry').removeClass('open');
  $('.close-btn').removeClass('display-close-btn');
  $('.news-full-text').removeClass('display-full-text');
  $('.news-text').addClass('news-read-more-btn');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="section-news">

  <div class="news-entry">

    <div class="news-image">
      <div class="entry-number">25</div>
      <div class="horizontal-hr"></div>
      <img src="img/news/2.png" />

      <div class="close-btn">
        <button class="circle scaleUp" data-animation="scaleDown" data-remove="3000"></button>
      </div>

    </div>
    <div class="news-text scrollTo">
      <p class="news-small-title">Doers - News</p>
      <h2 class="news-title">Doers is Looking For a New Junior Designer</h2>
      <hr class="news-hr"></hr>
      <p class="news-teaser-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>

      <p class="news-all-text">
        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia
        animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda
        est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis
        voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

        <br />Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum
        necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
      </p>
      <p class="news-read-more">Read More</p>
    </div>

  </div>

  <div class="news-entry">

    <div class="news-image">
      <div class="entry-number">24</div>
      <div class="horizontal-hr"></div>
      <img src="img/news/1.png" />

      <div class="close-btn">
        <button class="circle scaleUp" data-animation="scaleDown" data-remove="3000"></button>
      </div>

    </div>
    <div class="news-text scrollTo">
      <p class="news-small-title">Doers - News</p>
      <h2 class="news-title">Say ‘Hi’ to Our New Intern</h2>
      <hr class="news-hr"></hr>
      <p class="news-teaser-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>

      <p class="news-all-text">
        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia
        animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda
        est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis
        voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

        <br />Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum
        necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

        <br />Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum
        necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
      </p>
      <p class="news-read-more">Read More</p>
    </div>

  </div>

  <div class="news-entry">

    <div class="news-image">
      <div class="entry-number">23</div>
      <div class="horizontal-hr"></div>
      <img src="img/news/3.png" />

      <div class="close-btn">
        <button class="circle scaleUp" data-animation="scaleDown" data-remove="3000"></button>
      </div>

    </div>
    <div class="news-text scrollTo">
      <p class="news-small-title">Doers - News</p>
      <h2 class="news-title">Winter Holiday - What's Your Top Wish?</h2>
      <hr class="news-hr"></hr>
      <p class="news-teaser-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>

      <p class="news-all-text">
        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia
        animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis.
        <p class="news-read-more">Read More</p>
    </div>

  </div>

</div>

<!-- END JOURNAL ENTRIES -->

当我检查它时，我可以看到.news-entry发生了什么事（它闪烁了？）。

可能出现什么问题？

3 个答案:

答案 0 :(得分：1)

您的问题： .close-btn 位于 .news-entry 中。因此，当您单击关闭按钮时，在调用关闭按钮单击功能后，它还将调用新的条目单击功能。解决方案：在 .news-entry 之外移动 .close-btn ，或在关闭按钮点击功能中使用 return false 。

你可以尝试这个DEMO LINK HERE 。更新脚本...... 

/* NEWS CLOSE BTN */
$('.close-btn').on('click', function() {   
  $('.news-entry').removeClass('open');
  $('.close-btn').removeClass('display-close-btn');
  $('.news-full-text').removeClass('display-full-text');
  $('.news-text').addClass('news-read-more-btn');
  return false; // add this line.
});

答案 1 :(得分：0)

有了这些小信息我无法帮助你，可以考虑用你的代码制作一个小问题来解决问题。

但是这里有一些调试它的步骤：

  • 检查控制台上的错误：您可能有语法错误，控制台的输出将显示。
  • 确认触发关闭按钮单击事件：将console.log添加到该函数并查看它是否实际触发。 如果它没有触发查看类选择器和标记，以确保按钮顶部的另一个元素上没有发生单击。
  • 从您的元素中手动删除类（使用浏览器中的检查器工具），看看它是否为您提供了预期的结果。代码正在执行并且类被删除/添加，但结果不是预期的。

基本熟悉网络调试工具，特别是console。

答案 2 :(得分：0)

<div id="section-news">
                 <!--add id-->
                 <div class="news-entry" id="news-entry_1">

                        <div class="news-image">
                            <div class="entry-number">25</div>
                            <div class="horizontal-hr"></div>
                            <img src="img/news/2.png" />

                            <div class="close-btn" id="close-btn_1"><button  class="circle scaleUp" data-animation="scaleDown" data-remove="3000"></button>
                            </div>

                        </div>
                 <!--add id-->
                        <div class="news-text scrollTo" id="news-text_1">
                            <p class="news-small-title">Doers - News</p>
                            <h2 class="news-title">Doers is Looking For a New Junior Designer</h2>
                            <hr class="news-hr"></hr>
                            <p class="news-teaser-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>

                            <p class="news-all-text">
                            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

                            <br />

                            Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
                            </p>
                            <p class="news-read-more">Read More</p>
                        </div>

                </div>
                     <!--add id-->
                <div class="news-entry" id="news-entry_2">

                        <div class="news-image">
                            <div class="entry-number">24</div>
                            <div class="horizontal-hr"></div>
                            <img src="img/news/1.png" />

                            <div class="close-btn" id="close-btn_2"><button  class="circle scaleUp" data-animation="scaleDown" data-remove="3000"></button>
                            </div>

                        </div>
                        <div class="news-text scrollTo" id="news-text_2">
                            <p class="news-small-title">Doers - News</p>
                            <h2 class="news-title">Say ‘Hi’ to Our New Intern</h2>
                            <hr class="news-hr"></hr>
                            <p class="news-teaser-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>

                            <p class="news-all-text">
                            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

                            <br />

                            Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

                            <br />

                            Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
                            </p>
                            <p class="news-read-more">Read More</p>
                        </div>

                </div>

                <div class="news-entry" id="news-entry_3">

                        <div class="news-image">
                            <div class="entry-number">23</div>
                            <div class="horizontal-hr"></div>
                            <img src="img/news/3.png" />

                            <div class="close-btn" id="close-btn_3"><button  class="circle scaleUp" data-animation="scaleDown" data-remove="3000"></button>
                            </div>

                        </div>
                        <div class="news-text scrollTo" id="news-text_3">
                            <p class="news-small-title">Doers - News</p>
                            <h2 class="news-title">Winter Holiday - What's Your Top Wish?</h2>
                            <hr class="news-hr"></hr>
                            <p class="news-teaser-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>

                            <p class="news-all-text">
                            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis.
                            <p class="news-read-more">Read More</p>
                        </div>

                </div>

            </div>



<script>
    $('.close-btn').on('click', function() {
      //get id for the close button
      var index=$(this).attr("id");
      var idIndex=index.split("_")
     //remove class using id
      $('#news-entry_'+idIndex[1]).removeClass('open'); //check if id is getting fetched prperly
      $('#close-btn_'+idIndex[1]).removeClass('display-close-btn');
      $('#news-full-text_'+idIndex[1]).removeClass('display-full-text');
      $('#news-text_'+idIndex[1]).addClass('news-read-more-btn');
    });
</script>
相关问题
最新问题