Javascript 为什么即使我用jQuery更改了原始DOM元素类，jQuery仍采用这些类？

这是我的密码：

$（“.下拉箭头打开i”）。单击（函数（）{
console.log（“点击功能。下拉箭头打开，即使关闭也适用”）；
让thisParent=$（this）.closest（“.projects容器”）.find（“.needed while hidden”）；
thisParent.hide（）；
$（this）.closed（“.drop-down-arrow-open”）.removeClass（“drop-down-arrow-open”）.addClass（“drop-down-arrow-closed”）；
$（此）.removeClass（“fa V形向下”）.addClass（“fa V形向右”）；
});
$（“.下拉箭头闭合i”）。单击（函数（）{
console.log（“这从未应用”）；
让thisParent=$（this）.closest（“.projects容器”）.find（“.needed while hidden”）；
thisParent.show（）；
$（this）.closed（“.drop-down-arrow-closed”）.removeClass（“drop-down-arrow-closed”）.addClass（“drop-down-arrow-open”）；
$（此）.removeClass（“左V形右”）.addClass（“左V形下”）；
});
span.drop-down-arrow-open，span.drop-down-arrow-closed{
字体大小：22px；
颜色：#636b6f；
浮动：对；
右边填充：25px；
}

项目名称
说明

持续时间：一些持续时间
角色：一些与发展相关的角色
控制器：管道
官方网站：

问题是，
$（选择器）
在调用单击处理程序时绑定该处理程序。因此，您将结束处理程序绑定到元素上，而不将开始处理程序绑定到任何位置，因为在运行代码时，这些元素不存在

为了克服这个问题，您可以在回调本身中删除回调，同时添加备用回调

$el = $(".drop-down-arrow-open i")
var closeFn = function() {
    let thisParent = $el.closest(".projects-container").find(".needed-while-hiding");
    thisParent.hide();

    $el.closest(".drop-down-arrow-open").removeClass("drop-down-arrow-open").addClass("drop-down-arrow-closed");
    $el.removeClass("fa-chevron-down").addClass("fa-chevron-right");
    $el.off("click");
    $el.click(openFn);
});


var openFn = function(){
    let thisParent = $el.closest(".projects-container").find(".needed-while-hiding");
    thisParent.show();

    $el.closest(".drop-down-arrow-closed").removeClass("drop-down-arrow-closed").addClass("drop-down-arrow-open");
    $el.removeClass("fa-chevron-right").addClass("fa-chevron-down");
    $el.off("click");
    $el.click(closeFn);
});

$el.click(closeFn);

问题是，
$（选择器）
在调用click处理程序时将其绑定。因此，您将结束处理程序绑定到元素上，而不将开始处理程序绑定到任何位置，因为在运行代码时，这些元素不存在

为了克服这个问题，您可以在回调本身中删除回调，同时添加备用回调

$el = $(".drop-down-arrow-open i")
var closeFn = function() {
    let thisParent = $el.closest(".projects-container").find(".needed-while-hiding");
    thisParent.hide();

    $el.closest(".drop-down-arrow-open").removeClass("drop-down-arrow-open").addClass("drop-down-arrow-closed");
    $el.removeClass("fa-chevron-down").addClass("fa-chevron-right");
    $el.off("click");
    $el.click(openFn);
});


var openFn = function(){
    let thisParent = $el.closest(".projects-container").find(".needed-while-hiding");
    thisParent.show();

    $el.closest(".drop-down-arrow-closed").removeClass("drop-down-arrow-closed").addClass("drop-down-arrow-open");
    $el.removeClass("fa-chevron-right").addClass("fa-chevron-down");
    $el.off("click");
    $el.click(closeFn);
});

$el.click(closeFn);

正如@vijoc所说，问题在于当您将事件绑定到元素时。

作为一种可能的解决方案，您可以在每次更改单击功能时重新绑定正确的事件。

代码

        $(function(){
           bindOpen($(".open"));
           bindClose($(".closed"));
        });

        function bindOpen(element){
           $(element).unbind("click").bind("click",function(){
               //your open stuff here
               console.log("open");
               bindClose(element);
           })
        }

        function bindClose(element){ 
           $(element).unbind("click").bind("click",function(){
               //your open stuff here
               console.log("close");
               bindOpen(element);
           })
        }

正如@vijoc所说，问题在于当您将事件绑定到元素时。

作为一种可能的解决方案，您可以在每次更改单击功能时重新绑定正确的事件。

代码

        $(function(){
           bindOpen($(".open"));
           bindClose($(".closed"));
        });

        function bindOpen(element){
           $(element).unbind("click").bind("click",function(){
               //your open stuff here
               console.log("open");
               bindClose(element);
           })
        }

        function bindClose(element){ 
           $(element).unbind("click").bind("click",function(){
               //your open stuff here
               console.log("close");
               bindOpen(element);
           })
        }

这是因为在创建DOM时找不到类“drop down arrow closed”。确保始终使用

$('body').on('event', 'element', funciton)

因此，它将为已经创建或稍后创建的元素绑定事件


$（'body'）。在（'click'，”上。下拉箭头打开i'，函数（）{
让thisParent=$（this）.closest（“.projects容器”）.find（“.needed while hidden”）；
thisParent.hide（）；
$（this）.closed（“.drop-down-arrow-open”）.removeClass（“drop-down-arrow-open”）.addClass（“drop-down-arrow-closed”）；
$（此）.removeClass（“fa V形向下”）.addClass（“fa V形向右”）；
});
$（'body'）。在（'click'，”。下拉箭头关闭i'，函数（）{
console.log（“这从未应用”）；
让thisParent=$（this）.closest（“.projects容器”）.find（“.needed while hidden”）；
thisParent.show（）；
$（this）.closed（“.drop-down-arrow-closed”）.removeClass（“drop-down-arrow-closed”）.addClass（“drop-down-arrow-open”）；
$（此）.removeClass（“左V形右”）.addClass（“左V形下”）；
});
span.drop-down-arrow-open，span.drop-down-arrow-closed{
字体大小：22px；
颜色：#636b6f；
浮动：对；
右边填充：25px；
}

项目名称
说明

持续时间：一些持续时间
角色：一些与发展相关的角色
控制器：管道
官方网站：

发生这种情况是因为在创建DOM时找不到类“drop down arrow closed”。确保始终使用

$('body').on('event', 'element', funciton)

因此，它将为已经创建或稍后创建的元素绑定事件


$（'body'）。在（'click'，”上。下拉箭头打开i'，函数（）{
让thisParent=$（this）.closest（“.projects容器”）.find（“.needed while hidden”）；
thisParent.hide（）；
$（this）.closed（“.drop-down-arrow-open”）.removeClass（“drop-down-arrow-open”）.addClass（“drop-down-arrow-closed”）；
$（此）.removeClass（“fa V形向下”）.addClass（“fa V形向右”）；
});
$（'body'）。在（'click'，”。下拉箭头关闭i'，函数（）{
console.log（“这从未应用”）；
让thisParent=$（this）.closest（“.projects容器”）.find（“.needed while hidden”）；
thisParent.show（）；
$（this）.closed（“.drop-down-arrow-closed”）.removeClass（“drop-down-arrow-closed”）.addClass（“drop-down-arrow-open”）；
$（此）.removeClass（“左V形右”）.addClass（“左V形下”）；
});
span.drop-down-arrow-open，span.drop-down-arrow-closed{
字体大小：22px；
颜色：#636b6f；
浮动：对；
右边填充：25px；
}

项目名称
说明

持续时间：一些持续时间
角色：一些与发展相关的角色
控制器：管道
官方网站：

实际上，在运行期间，单击处理程序绑定到与指定选择器匹配的已知
doElement
，当选择器更改时，您需要注意更新选择器

解决方法是使用该方法在公共父级
domeElement
上设置侦听器，并使用另一个选择器进行筛选。使用您的用例的一个例子是

$(".parent-container").on("click", ".drop-down-arrow-open i", function() {
    ...
})

但是，根据您的意图判断，当箭头图标