Question

我试图在jQuery中为我的网站动态创建组合部分，以便稍后通过数据库轻松添加内容。我发现一切正常，除了监听器总是重定向到最后创建的监听器，似乎。所以无论我点击哪个标题，它总是打开最后一个选项，而不是单击的标题。这是我的代码：

var portfolio_array = <?php echo json_encode($GLOBALS["portfolio_array"]); ?>;
        for (var i = portfolio_length - 1; i >= 0; i--) {
            var project_name = portfolio_array[i]["name"];
            var project_tag = portfolio_array[i]["tag"];
            var project_description = portfolio_array[i]["description"];
            var project_year = portfolio_array[i]["year"];
            var project_image = portfolio_array[i]["image"];

            $("projects").append("<project class = " + project_tag + ">");
            $("."+project_tag).append("<br><project_header class = project-header>" + project_name + "</project_header>");
            $("."+project_tag).append("<br><project-content class = slideable></project-content>");
            $("."+project_tag).children(".slideable").append("<project_description class = project-desc>"+project_description+"</project_description>");
            $("."+project_tag).children(".slideable").append("<br><project_image class = project-image>"+project_image+"</project_image>");
            //<img src="pic_mountain.jpg" alt="Mountain View" style="width:304px;height:228px;">

            $("."+project_tag).children(".slideable").hide(1000);

            //alert("Added a click listener to tag " + project_tag);
            $("."+project_tag).children(".project-header").click(function(event){
                $("."+project_tag).children(".slideable").slideToggle(400);
                //alert("Clicked " + project_tag);
            });
        };

我已尝试通过提醒进行调试，但除了始终指向上一个项目创建的点击提醒之外，它无法找到任何问题。在创建事件之前的警报为我提供了正确的项目名称。

有人看到这个有什么问题吗？我还是有点新手，所以如果那里的某个地方可能有一个非常愚蠢的错误，我还不知道......

Answer 1

这是一个经典错误，问题是所有点击处理程序都使用相同的project_tag，并且其值在激活处理程序时会发生变化。

你可以通过使用处理程序的this（它是被点击的DOM元素）来建议@TahirAhmed。这实际上是首选，因为您可以同时将相同的点击处理程序绑定到多个元素，并使用this进行区分。

或者你可以使用一个闭包，它将处理函数绑定到当前值（在绑定函数时）。

例如

$("."+project_tag).children(".project-header").click(
     (function(tag) {
          return function(event){   // returns a function that is bound to the "tag" parameter value
            $("."+tag).children(".slideable").slideToggle(400);
          }
      })(project_tag)  // use current value of project_tag
  );

Answer 2

我认为将点击处理程序中的$("."+project_tag)更改为$(this).parent()会有所帮助。

通过循环

2 个答案: