添加和删除类jQuery

你的问题:。close-btn在.news-entry中。当你点击关闭按钮，在调用关闭按钮点击功能之后它也会调用new entry点击功能。解决方法:移动。close-btn在之外。news-entry或使用返回false关闭按钮点击功能

你可以在这里尝试这个演示链接.更新脚本…

/* 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.
});

有了这些我不能帮助你的小信息，考虑对你的代码做一个小的jsfiddle来找到问题。

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

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

基本熟悉web调试工具，特别是控制台。

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