Question

因此，我将大部分相关信息输入到代码本身中我想要解释发生了什么以及为什么，特别是.text .html的多种结果之间以及没有返回我想要的内容

<DOCTYPE! Html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style>
p{color: white;
background: black;}
</style>
<script>  
$('document').ready(function() {
            $(document).on('click', '.nav', function() {
                document.getElementById('text').innerHTML=$(this).html;
            });
}); 
</script> 
</head>
<body>
This is a test html to trouble shoot the functionality of the script, the above script runs and does what it needs to in other aspects but when trying to add in the ability to edit a divs text based on the nav clicked on theres a error.

when using ".text" in the script i get <p> function (a){return V(this,function(a){return void 0===a?m.text(this):this.empty().append((this[0]&&this[0].ownerDocument||y).createTextNode(a))},null,a,arguments.length)} </p> in my div,when i use ".html" in my script i get  <p> function (a){return V(this,function(a){var b=this[0]||{},c=0,d=this.length;if(void 0===a)return 1===b.nodeType?b.innerHTML.replace(fb,""):void 0;if(!("string"!=typeof a||mb.test(a)||!k.htmlSerialize&&gb.test(a)||!k.leadingWhitespace&&hb.test(a)||rb[(jb.exec(a)||["",""])[1].toLowerCase()])){a=a.replace(ib,"<$1>");try{for(;d>c;c++)b=this[c]||{},1===b.nodeType&&(m.cleanData(ub(b,!1)),b.innerHTML=a);b=0}catch(e){}}b&&this.empty().append(a)},null,a,arguments.length)} </p>


<ul id="nav">
    <li class="nav"><a href="#"> This is the text that should be placed in the div </a></li>
</ul>

<div id="text"> this text should be changed </div>
</body>
</html>

Answer 1

jQuery方法.html()是您需要调用它/使用()的函数。或者去香草，然后做this.innerHTML。

这意味着：

$(document).on('click', '.nav', function() {
    document.getElementById('text').innerHTML = this.innerHTML;
});

代码段中的示例：

＆＃13;

$('document').ready(function() {
            $(document).on('click', '.nav', function() {
                document.getElementById('text').innerHTML=this.innerHTML;
            });
});

＆＃13;

p{color: white;
background: black;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
This is a test html to trouble shoot the functionality of the script, the above script runs and does what it needs to in other aspects but when trying to add in the ability to edit a divs text based on the nav clicked on theres a error.

when using ".text" in the script i get <p> function (a){return V(this,function(a){return void 0===a?m.text(this):this.empty().append((this[0]&&this[0].ownerDocument||y).createTextNode(a))},null,a,arguments.length)} </p> in my div,when i use ".html" in my script i get  <p> function (a){return V(this,function(a){var b=this[0]||{},c=0,d=this.length;if(void 0===a)return 1===b.nodeType?b.innerHTML.replace(fb,""):void 0;if(!("string"!=typeof a||mb.test(a)||!k.htmlSerialize&&gb.test(a)||!k.leadingWhitespace&&hb.test(a)||rb[(jb.exec(a)||["",""])[1].toLowerCase()])){a=a.replace(ib,"<$1>");try{for(;d>c;c++)b=this[c]||{},1===b.nodeType&&(m.cleanData(ub(b,!1)),b.innerHTML=a);b=0}catch(e){}}b&&this.empty().append(a)},null,a,arguments.length)} </p>


<ul id="nav">
    <li class="nav"><a href="#"> This is the text that should be placed in the div </a></li>
</ul>

<div id="text"> this text should be changed </div>

＆＃13;

Answer 2

这样的事情：

$(document).ready(function () {

    $(".nav").on('click', function() {
       $("#text").html( $(this).html() ); // Getting too nested here 
    }

}

无法在导航点击事件上编辑div

2 个答案:

代码段中的示例：