JQuery和点击功能

时间:2009-12-29 21:46:12

标签: jquery click

此代码无效,我做错了什么?

$(document).ready(function(){
  $("a.hide-para").click(function(){
    $('p').hide();
    $(this).html('Show Paragraphs').removeClass('hide-para').addClass('show-para');
  });
  $("a.show-para").click(function(){
    $('p').show();
    $(this).html('Hide Paragraphs').removeClass('show-para').addClass('hide-para');
  });
});

7 个答案:

答案 0 :(得分:9)

它不起作用,因为在元素绑定到特定元素/类组合后动态添加/删除类。也就是说,在与该类有任何链接之前,您可以将click事件添加到具有“show-para”类的链接(或者可能反过来取决于您的默认值)

在任何一种情况下,jQuery都有live函数来解决这个问题,只需将click处理程序更改为.live('click', function(){ })

答案 1 :(得分:4)

在修改DOM时,您正在丢失绑定。要么停止更改类名,要么使用live()绑定事件:

$('a.hide-para').live('click', function() { ...

答案 2 :(得分:0)

假设你的课程总是以“hide-para”开头,这应该有效:

$(document).ready(function() {
    $("a.hide-para").click(function(){
        if($(this).hasClass('hide-para')){
            $('p').hide();
            $(this).html('Show Paragraphs').removeClass('hide-para').addClass('show-para');
        } else {
            $('p').show();
            $(this).html('Hide Paragraphs').removeClass('show-para').addClass('hide-para');
        }
    });
});

答案 3 :(得分:0)

它将适用于第一次更改,但之后它将再次执行相同的更改。

加载页面时会应用一次事件,更改类不会删除并添加事件处理程序。

您可以使用同时执行这两项处理的事件处理程序,而不是使用一个事件处理程序进行隐藏,而使用一个事件处理程序:

$(function() {
  $("a.hide-para, a.show-para").click(function(e) {
    if ($(this).hasClass('hide-para')) {
      $('p').hide();
      $(this).html('Show Paragraphs').removeClass('hide-para').addClass('show-para');
    } else {
      $('p').show();
      $(this).html('Hide Paragraphs').removeClass('show-para').addClass('hide-para');
    }
    e.preventDefault();
  });
});

此外,调用preventDefault会阻止点击的默认操作,即在链接之后。

答案 4 :(得分:-1)

我想这个:

<强> removeClass( '隐藏 - 对')。addClass( '显示 - 对')

导致您的问题。

答案 5 :(得分:-1)

如果您的点击实际上是关注链接而不是进行事件调用,则可以执行以下操作:

$("a.hide-para").click(function(evt){
    evt.preventDefault();
    // the rest is your code...

这可以防止发生默认(链接跟随操作)...除了在IE6中。

希望这有帮助。

答案 6 :(得分:-2)

在点击处理程序中尝试return false;