jQuery函数中this指向异常问题：show_siblings函数里this未定义且无法正常工作

Got it, let's sort out that this binding problem you're hitting in the show_siblings function. The root cause here is how inline event handlers work: when you call show_siblings() directly from an onclick attribute, the function runs in the global scope—so this points to the window object instead of the span that was clicked.

Here are two solid solutions to fix this:

Solution 1: Pass this as an argument to the function #

The quickest fix is to modify your inline onclick to pass the clicked element directly to show_siblings:

Update your addHeading function's span line to:

$(".content").append("<h1 class='content_heading'>Heading <span onclick='show_siblings(this)' ><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>");

Then adjust the show_siblings function to accept this element as a parameter:

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

This bypasses the this confusion entirely by explicitly passing the target element.

Solution 2: Use jQuery Event Delegation (Recommended) #

Since you're already using jQuery, it's better practice to avoid inline event handlers altogether. Event delegation lets you bind events to dynamically added elements (like the span you're appending) and keeps your this behavior consistent.

First, remove the inline onclick from your span and add a class to target it:

function addHeading(){
    $(".content").append("<h1 class='content_heading'>Heading <span class='toggle-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";
}

Then add this event delegation code somewhere that runs after the DOM is ready (like inside $(function() { ... })):

$(document).on('click', '.toggle-siblings', function() {
    $(this).children().toggleClass("showElement");
});

With event delegation, this will automatically refer to the clicked .toggle-siblings span—exactly what you need. This approach is cleaner, easier to maintain, and works seamlessly with dynamically added content.

内容的提问来源于stack exchange，提问作者Anonymous