模拟点击不起作用... jQuery

Question

如果 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/

Answer 1

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

将您的.click("click", function(){ 更改为.click(function(){，您的触发器应该可以正常工作。

Answer 2

我会说，与其触发点击，不如只存储对回调函数的引用，然后将该引用用作您的点击事件回调，然后也单独调用 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 的回调已被省略

旁注：

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

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