课后切换时，Jquery不会选择按钮

Question

我有一些jquery，当点击一个按钮时，将一个类从一个按钮切换到另一个类（即从#testButton单击切换类从.first到.second，带有图像切换以显示它有效） 。第一次点击效果很好，它可以切换图像，但第二次点击不会做任何事情。好像它没有认识到新的课程。这是一个小提琴。

https://jsfiddle.net/myfb44yu/

这是有问题的javascript。

$(document).ready(function(){
  $('.first').click(function(){
    alert('works');
    $('#testButton').toggleClass('first', 'second');
  });

  $('.second').click(function(){
    alert("works");
    $('#testButton').toggleClass('second', 'first');
  });
});

有趣的是，当我使用alert（）进行检查时它会起作用，但是当我尝试更改img src时却没有。

Answer 1

这里的主要问题是关于.toggleClass的语法错误，但正如其他人已经解决的那样，我想指出你应该考虑重新思考如何应用你的听众 - 只是作为前进的好习惯。

jQuery事件绑定概述

将页面上的元素视为商店中的商品。你是一名员工，而你的经理说“在玩具部门的任何地方都贴上红色标签”，所以你这样做了。第二天，他在玩具部门放了10个新玩具，然后对你说：“为什么所有的玩具都没有红色标签？”然后他将其中一个玩具移到衣服部分，并问你：“为什么这个项目上面有红色标签？”这很简单。你把红色标签放在玩具部门的任何东西上，当他告诉你这样做时 - 之后事情就转移了。

此示例中的玩具将是您的.first和.second元素。

这是jQuery事件绑定的工作方式 - 它们仅适用于在初始化事件时满足选择器的元素。

因此，如果你执行$('.myClass').click();，然后将.myClass放在五个按钮上 - 这些按钮都不会调用此函数，因为它们没有放置侦听器它们。

类似地，如果您使用类将侦听器放在元素上，但随后从该元素中删除该类，则将维护绑定事件。

解决方案

$(document).on("click", ".first", function() { } );

这称为事件委派。

继续我之前的类比，这相当于完​​全跳过标记项目，而只是在客户将它们带到收银机时决定它们是否是玩具。

我们不是将侦听器放在特定元素上，而是将它放在整个页面上。通过使用".first"作为第二个参数（采用选择器），只有在元素具有类first时才会执行该函数。

希望这有帮助。

编辑：在我打字的时候，JHecht留下了一个good answer，指出了我上面提到的同样问题。

Answer 2

N个元素可以具有相同的类名，因此，如果您尝试将其作为$（＆＃39; .classname＆＃39;）进行搜索，则会返回一个数组，以便＆＃39;你的代码无效的原因。class selector

Id是唯一的，每个元素都应该有一个id。在您的代码按钮中有两个ID，对于您尝试切换第一个和第二个的同一按钮，您不需要为第一个和第二个分别设置两个事件

而你可以写成以下

检查此代码段

＆＃13;

＆＃13;

$(document).ready(function() {
  var firstElements = $('.first')
  var first = firstElements[0];
  var secondElements = $('.second');
  var second = secondElements[0]

  $("#testButton").click(function() {
    alert('works');
    $(this).toggleClass('first').toggleClass('second');
  });



});

＆＃13;

.first {
  color: red;
}
.second {
  color: green;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="img/images.jpeg" alt="" id="testImage">
<div id="testDiv">
  <button type="button" id='testButton' class='first'>Hi</button>
</div>

＆＃13;

＆＃13;

＆＃13;

希望有所帮助

Answer 3

关于这个解决方案。希望它有所帮助！

$(document).ready(function(){

    $("#testButton").click(function(){
        if($(this).prop("class") === "first"){
        alert('first');
         $(this).removeClass("first").addClass("second"); 
        }
        else if($(this).prop("class") === "second"){
         alert("second");
         $(this).removeClass("second").addClass("first");
        }
    });
});

.first{
    color: red;
}
.second{
    color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<img src="img/images.jpeg" alt="" id="testImage">
<div id="testDiv">
    <button type="button" id='testButton' class='first'>Hi</button>
</div>

Answer 4

我希望我所说的比我感觉更有意义。

您的问题是，在分配点击事件时，目前没有一个类别为.second的元素。

另外，你的代码错了。 toggleClass接受一些参数，第一个是一串类，第二个是可选参数，用于检查是否打开或关闭类。

在不更改大量代码的情况下实现所需的方法是事件委派，如下所示。

$(function() {
  $(document).on('click', '.btn-first,.btn-second', function() {
    //here we are adding the click event on the document object, and telling it that we only want to delegate this event to an object that matches the classes of .btn-first or .btn-second.

    //Note: to those saying "why not just do it on the .btn class an avoid having to do this", it is so he can see what delegation looks like. But you are correct, with this markup it would be better to simply add the click event on the .btn class.
    $(this).toggleClass('btn-first btn-second');
  });


});

.btn {
  padding: 4px 8px;
  border-radius: 3px;
  border: 1px solid grey;
}
.btn-first {
  background-color: green;
  border-color: green;
}
.btn-second {
  background-color: orange;
  border-color: orange
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="img/images.jpeg" alt="" id="testImage">
<div id="testDiv">
  <button type="button" id='testButton' class='btn btn-first'>Hi</button>
</div>

Answer 5

javascript，CSS和HTML的组合，用于在类＃34; first＆＃34;的任何元素时切换#testButton的类。或＆＃34;秒＆＃34;单击，包括测试按钮本身。已发布的代码已更改为提供JQuery的.toggleClass方法，其中包含以空格分隔的类名列表。点击＆＃34;运行代码段＆＃34;测试效果。

＆＃13;

＆＃13;

$(document).ready(function(){
  $('.first').click(function(){
    $('#testButton').toggleClass('first second');
  });

  $('.second').click(function(){
    $('#testButton').toggleClass('first second');
  });
});

＆＃13;

.first { border: thick outset green;}
.second { border: thick inset red;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="first">This paragraph has first class</p>
<p class="second">This paragraph has second class</p>
<button type="button" id="testButton" class="first">this button starts out first class</div>

＆＃13;

＆＃13;

＆＃13;

然后可以通过在单个选择器中组合多个类名来简化脚本，只留下：

$(document).ready(function(){
    $('.first, .second').click(function(){
       $('#testButton').toggleClass('first second');
    });
});

Answer 6

• 制作一个按钮共享的中性课（.btn）。
• 然后将 一个 状态类添加到每个按钮（.first或.second）。
• 仅将点击事件委派给中立类（$('.btn').on('click',...）。
• 然后在this（$(this).toggleClass('first second');）
上切换两个州类
• 图片按CSS更改，每个按钮有2张图片，根据按钮的州级别在display:none/block之间交替显示。
• 有一个示例，其中图像位于按钮之外，另一个示例不会切换类。

段

＆＃13;

＆＃13;

$('.btn').on('click', function() {
  $(this).toggleClass('first second');
});

/* OR */
$('.alt').on('click', function() {
  $('.img').toggle();
});

＆＃13;

.first > .one {
  display: block;
}
.first > .two {
  display: none;
}
.second > .one {
  display: none;
}
.second > .two {
  display: block;
}
.first + .one {
  display: block;
}
.first + .one + .two {
  display: none;
}
.second + .one {
  display: none;
}
.second + .one + .two {
  display: block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>Use jQuery with CSS</p>
<button class='btn first'>
  <img src='http://placehold.it/50x50/000/fff?text=1' class='one'>
  <img src='http://placehold.it/50x50/fff/000?text=2' class='two'>
</button>

<button class='btn second'>
  <img src='http://placehold.it/50x50/0e0/960?text=1' class='one'>
  <img src='http://placehold.it/50x50/fff/000?text=2' class='two'>
</button>
<br/>
<br/>

<button class='btn first'>Toggle</button>
<img src='http://placehold.it/50x50/fc0/00f?text=1' class='one'>
<img src='http://placehold.it/50x50/00f/fc0?text=2' class='two'>


<button class='btn second'>Toggle</button>
<img src='http://placehold.it/50x50/fc0/00f?text=1' class='one'>
<img src='http://placehold.it/50x50/00f/fc0?text=2' class='two'>

<p>Or use only jQuery no CSS</p>
<img src='http://placehold.it/50x50/0e0/930?text=1' class='img'>
<img src='http://placehold.it/50x50/930/0e0?text=2' class='img' style='display:none'>
<button class='alt' style='display:block;'>Toggle</button>

＆＃13;

＆＃13;

＆＃13;