为什么“this”在我的 JQ 功能中未定义?

why 'this' is undefined in my JQ funtion?

提问人:Anonymous 提问时间:8/19/2022 最后编辑:smitopAnonymous 更新时间:8/20/2022 访问量:30

问:

“这个”不起作用show_siblings

function addHeading(){
        $(".content").append("<h1 class='content_heading'>Heading <span onclick='show_siblings()' ><svg xmlns='http://www.w3.org/2000/svg' height='18' width='20'><path d='M5.688 11.083q-.459 0-.771-.323-.313-.322-.313-.76 0-.458.323-.771.323-.312.761-.312.458 0 .77.323.313.322.313.76 0 .458-.313.771-.312.312-.77.312Zm4.312 0q-.458 0-.771-.323-.312-.322-.312-.76 0-.458.323-.771.322-.312.76-.312.458 0 .771.323.312.322.312.76 0 .458-.323.771-.322.312-.76.312Zm4.312 0q-.458 0-.77-.323-.313-.322-.313-.76 0-.458.313-.771.312-.312.77-.312.459 0 .771.323.313.322.313.76 0 .458-.323.771-.323.312-.761.312Z'/></svg><div class='contentChildOptions'><button>Copy</button><button>Duplicate</button><button>Delete</button></div></span> </h1>");
        $(".content_heading").attr("contentEditable","true");
        $(".content_heading > *").attr("contentEditable","false");
        document.getElementById("heading_options").style.display = "block";
    }
function show_siblings(){              
    $(this).children().toggleClass("showElement");
javascript jquery 这个

评论

0赞 epascarello 8/19/2022
内联事件处理程序不传递上下文
0赞 epascarello 8/19/2022
只需使用事件委托,而不必考虑内联事件

答:

0赞 GMKHussain 8/19/2022 #1

代码中缺少 '''this'' 引用

function show_siblings(){              
    $(this).children().toggleClass("showElement");

请参阅示例,我揭开了这个那个关键字的神秘面纱

let element1 = document.getElementById("element1");
let element2 = document.getElementById("element2");

let toggle = true;

function toggleFunc( that ) {
  toggle = !toggle;
  that.setAttribute("data-show", toggle );
}
[data-show="false"] {
 color: red
}

[data-show="true"] {
 color: green
}
<div id="toggle" onclick=toggleFunc(this)>Click here: 1</div>

<div id="showElement" onclick=toggleFunc(this)>Click here: 2<div>