关于Jquery点击事件替换问题。求解答

zdqzsp 2014-03-17 11:04:03

各位，我想做一个如下点击功能。当我点击按钮时，他触发$(".a")事件，然后把class属性改为b。想再次点击触发$(".b")事件。但它每次都是执行a。貌似这个实现思路是有问题的。请问有哪位可以提供解决方案吗？
题如下：
<script type="text/javascript">
$(function(){
$(".a").click(function(){
$(this).val("b点击").attr("class","b");
});
$(".b").click(function(){
$(this).val("a点击").attr("class","a");
});
});
</script>
</head>

<body>
<input type="button" value="点击" class="a" />
</body>

...全文

200 7 打赏收藏转发到动态举报

写回复

用AI写文章

7 条回复

切换为时间正序

请发表友善的回复…

发表回复

zdqzsp 2014-03-18

打赏
举报

谢谢各位，问题搞定了。采用判断做处理

l676331991 2014-03-17

打赏
举报


 $(".a").click(function()  {
    var $this = $(this);
    if($this.hasClass("a")) {
        $this.removeClass("a").addClass("b").val("b点击");
    } else {
        $this.removeClass("b").addClass("a").val("a点击");
    }       
 });

l676331991 2014-03-17

打赏
举报

live绑定不可取，动态绑定也不可取，在事件回调中判断是正确的做法。不管是$(".a")还是$(".b"),目的只是选中你要的dom元素，再进行事件绑定，这个事件是绑定到dom对象上了，而不管他将来是否还符合这个选择器。好比一个人叫张三，你筛选出叫张三的给他印一个烙印，他后来改名了叫李四，但是烙印还是在他身上。所以，再次点击，它还是触发之前绑定的事件的。事件绑定是绑定到dom对象上的，而不是选择器上，选择器只是帮助你筛选出你要的那个（些）dom元素。哪怕你之后点击它，它的class已经被修改了，它还是那个dom元素，你之前绑定的事件还是会触发。

zhjdg 2014-03-17

打赏
举报

$(function() {
			var $cache = $(".a");
			$cache.click(function() {
				var that = $(this);
				if (!that.data('click')) {
					that.data('click', true).val("b点击").attr("class", "b");
				} else {
					that.data('click', false).val("a点击").attr("class", "a");
				}

			})
		});

人生难得一只鸡 2014-03-17

打赏
举报

$(function(){
	$(".a").click(function()
	{
		$(this).val("b点击").attr("class","b");
		$(".b").click(function()
		{
			$(this).val("a点击").attr("class","a");
		});
	});
	
});

不过我还是建议你不要利用可变属性给一个元素注册点击事件，至少要在页面上找的到你可以加个ID，然后根据唯一ID找到该元素，如果你想实现属性值来回切换的话，那么可以在事件中通过判断属性值的方式来实现

$(function(){
	$("#btn").click(function()
	{
		if($(this).attr("class")=='a')
		{
			$(this).attr('class','b')
			$(this).val('b点击');
		}
		else
		{
			$(this).attr('class','a')
			$(this).val('a点击');
		}
	});
	
});

嘻哈大咖秀 2014-03-17

打赏
举报

$(function(){
        $(".a").live('click',function(){//如果你的jquery是1.9以上 把live改成on
            $(this).val("b点击").attr("class","b");
        });
        $(".b").live('click',function(){
            $(this).val("a点击").attr("class","a");
        });
    });

zdqzsp 2014-03-17