2

如果 td 的类是“nee”，我正在尝试使用 jQuery 模拟点击。不知何故，所有选项（如触发器）和文档就绪点击都不起作用......

HTML：

<td align="center" class="one nee">
   <img class="img-swap" src="images/nee.png" alt="Aanwezigheid"/>
</td>

触发动作：

    $(document).ready(function(){ 
          $('#some-id').trigger('click'); 
    });

HTML 返回的图像是一个变量，标准值为“ja.png”。但是一旦在数据库中将该项目设置为 no，图像就会更改为 nee.png。但是当它被触发时，我希望输入字段出现，就像我单击 ja.png 更改为 nee.png 时它们出现的方式一样。这是淡入的。它单独工作。但我无法模拟点击。

图像更改代码：

        $(document).ready(function(){
          $(".img-swap").click("click", function() {
            if ($(this).attr("class") == "img-swap") {
              this.src = this.src.replace("ja","nee");
            } else {
              this.src = this.src.replace("nee","ja");
            }
            $(this).toggleClass("ja");
          });
         });

淡入淡出动作的代码：

        $(document).ready(function(){       
            $(".nee").trigger("click");
            $("td.one").click("click", function(){
                
                if ($(this).parent().find("td.two, td.three").hasClass("toggled")){
                    $(this).parent().find("td.two").fadeOut(400);
                    $(this).parent().find("td.three").fadeOut(400);
                    $(this).parent().find("td.two").removeClass("toggled");
                    $(this).parent().find("td.three").removeClass("toggled");
                    
                } else {
                    
                    if ($(this).parent().find("td.three").hasClass("DoNotWant")){
                        $(this).parent().find("td.three").fadeOut(400);
                        $(this).parent().find("td.three").toggleClass("DoNotWant");
                    } else {
                        $(this).parent().find("td.three").fadeIn(400);
                        $(this).parent().find("td.three").toggleClass("toggled");
                    }
                    
                    $(this).parent().find("td.two").fadeIn(400);
                    $(this).parent().find("td.two").toggleClass("toggled");
                }                   
            });
            
            $("td.two").click("click", function(){
                
                if ($(this).parent().find("td.three").hasClass("toggled")){
                    $(this).parent().find("td.three").fadeOut(400);
                    $(this).parent().find("td.three").removeClass("toggled");
                    $(this).parent().find("td.three").toggleClass("DoNotWant");
                    
                } else { 
                    $(this).parent().find("td.three").fadeIn(400);
                    $(this).parent().find("td.three").toggleClass("toggled");
                    
                }
            });             
        });

任何人都可以帮助我吗？

现场示例在这里： http ://bryan.limewebsolutions.nl/

4

2 回答 2

1

而不是触发点击，我会说只存储对回调函数的引用，然后使用该引用作为您的点击事件回调，然后单独调用 i ，而不是触发点击事件。像这样的东西：

var callback = function(){  
    if ($(this).parent().find("td.two, td.three").hasClass("toggled")){
        $(this).parent().find("td.two").fadeOut(400);
        $(this).parent().find("td.three").fadeOut(400);
        $(this).parent().find("td.two").removeClass("toggled");
        $(this).parent().find("td.three").removeClass("toggled");

    } else {

        if ($(this).parent().find("td.three").hasClass("DoNotWant")){
            $(this).parent().find("td.three").fadeOut(400);
            $(this).parent().find("td.three").toggleClass("DoNotWant");
        } else {
            $(this).parent().find("td.three").fadeIn(400);
            $(this).parent().find("td.three").toggleClass("toggled");
        }

        $(this).parent().find("td.two").fadeIn(400);
        $(this).parent().find("td.two").toggleClass("toggled");
    }                   
};

// Bind the click event
$("td.one").click("click", callback);
$(function () {
   // Instead of triggering a click, just call the function
   callback();
});

在此示例中td.two，为简单起见，省略了 for

旁注：

  1. 如果您有多个 td 与 if 语句中的选择器匹配，我相信您的逻辑存在问题。在这种情况下，第一个匹配的元素将始终在检查它是否具有 class 时使用toggled。.hasClass()将评估匹配元素集中的第一个元素。

  2. 您可以通过使用更少的 DOM 遍历来提高代码效率。在回调中，将对父级的引用保存在变量中，并使用该变量而不是$(this).parent()每次都调用。

于 2012-10-08T08:42:46.317 回答
1

.click()是 的快捷方式.bind('click')，因此您不必将事件类型 ( click) 提供给函数。

改变你的.click("click", function(){，.click(function(){你的触发器应该正常工作。

于 2012-10-08T08:45:51.510 回答