我正在尝试在li项上实现onClick事件。每次触发事件时，它都会将div中的某些文本更改为javascript中的某些预设文本。但是我无法让它发挥作用。我也试过在reddit上问这个问题。
下面显示的代码也可以在JSFiddle
中找到<body>
<div id="header">
<h1>THE BODAK</h1>
</div>
<ul>
<li><a href="history.php">Back</a></li>
<li><a href="#" class="link" id="link" >Anthony</a></li>
<li><a href="#" class="link2" id="link2" >Ben</a></li>
<li><a href="#" class="link3" id="link3" >Jacob</a></li>
<li><a href="#" class="link4" id="link4" >Jesse</a></li>
<li><a href="#" class="link5" id="link5" >Karmar</a></li>
<li><a href="#" class="link6" id="link6" >Mitchell</a></li>
</ul>
<br>
<br>
<br>
<br>
<script>
$(document).ready(function() {
$('.link').on('click', function() {
document.getElementsByTagName('h2')[0].innerHTML = "Anthony";
document.getElementById("anthony").innerHTML = "Alias: Lysander Lucretius II";
document.getElementById("anthony2").innerHTML = "A human cleric who worships Verum-Die, speaks many languages and talks much better than he hits. Has been seen with a black gem and a white gem lodged in his chest.";
});
});
$(document).ready(function() {
$(".link2").click(function(){
document.getElementsByTagName('h2')[0].innerHTML = "Ben";
document.getElementById("anthony").innerHTML = "Alias: Nishi Kani-Orc Garland-Human";
document.getElementById("anthony2").innerHTML = "Not much is known about the rogueish character, it is known though that he is sneaky and acrobatic. He has been seen feeding a cat, and has said he will not use his shape-shifitng abilities to commit crimes.";
});
});
$(document).ready(function() {
$(".link3").click(function(){
document.getElementsByTagName('h2')[0].innerHTML = "Jacob";
document.getElementsByTagName('h2')[0].innerHTML = "Alias: Max";
document.getElementById("anthony2").innerHTML = "The large half-giant is crippled and bound to a magic chair, however this giant has mastery over some sort of telekenetic arts.";
});
});
$(document).ready(function() {
$(".link4").click(function(){
document.getElementsByTagName('h2')[0].innerHTML = "Jesse";
document.getElementById("anthony").innerHTML = "Alias:Kuso Oma";
document.getElementById("anthony2").innerHTML = "The age isnt the only mystery sourrounding this women, seemingly being able to summun demon-like abilities at will and laughing in the face of danger. Has stated her race comes from deep underground.";
});
});
$(document).ready(function() {
$(".link5").click(function(){
document.getElementsByTagName('h2')[0].innerHTML = "Karmar";
document.getElementById("anthony").innerHTML = "Alias:Zota";
document.getElementById("anthony2").innerHTML = "A human cleric who worships Verum-Die, speaks many languages and talks much better than he hits. Has been seen with a black gem and a white gem lodged in his chest.";
});
});
$(document).ready(function() {
$(".link6").click(function(){
document.getElementsByTagName('h2')[0].innerHTML = "Alias:Drudder";
document.getElementById("anthony").innerHTML = "Alias: Lysander Lucretius II";
document.getElementById("anthony2").innerHTML = "This drow definitely practices some dark arts, but has already risked his life to save one of the groups memebers. Was caught in some shady dealings with rat-folk.";
});
});
</script>
<h2>Anthony</h2>
<div id="anthony" style="word-wrap: break-word; width: 100%" >Alias: Lysander Lucretius II</div></TD>
<br>
<div id="anthony2" style="word-wrap: break-word; width: 100%" >A human cleric who worships Verum-Die, speaks many languages and talks much better than he hits. Has been seen with a black gem and a white gem lodged in his chest.</div></TD>
<br>
</body>
答案 0 :(得分：1)
$('li').click(function(){
$('h2').text($(this).find('a').text());
});
https://jsfiddle.net/jzzdLvm5/9/
您可以按a标记进行选择，然后点击并将文字放在当前h2文字内（现在比div更合乎逻辑）
答案 1 :(得分：1)
你的小提琴不包括jQuery，所以这就是为什么它不起作用。但是，您有几个问题可以解决。
首先，您只需要使用一个document.ready处理程序。您的所有代码都可以放在那里。其次，如果您遵循DRY原则，那么如果您将每个元素的个别信息分离到data属性，则可以对所有元素使用单个事件处理程序，如下所示：
<ul>
<li><a href="history.php">Back</a></li>
<li><a href="#" class="link" id="link" data-title="Anthony" data-alias="Alias: Lysander Lucretius II" data-bio="A human cleric who worships Verum-Die, speaks many languages and talks much better than he hits. Has been seen with a black gem and a white gem lodged in his chest.">Anthony</a></li>
<li><a href="#" class="link" id="link2" data-title="Ben" data-alias="Alias: Nishi Kani-Orc Garland-Human" data-bio="Not much is known about the rogueish character, it is known though that he is sneaky and acrobatic. He has been seen feeding a cat, and has said he will not use his shape-shifitng abilities to commit crimes.">Ben</a></li>
<li><a href="#" class="link" id="link3" data-title="Jacob" data-alias="Alias: Max" data-bio="The large half-giant is crippled and bound to a magic chair, however this giant has mastery over some sort of telekenetic arts.">Jacob</a></li>
<li><a href="#" class="link" id="link4" data-title="Jesse" data-alias="Alias:Kuso Oma" data-bio="The age isnt the only mystery sourrounding this women, seemingly being able to summun demon-like abilities at will and laughing in the face of danger. Has stated her race comes from deep underground.">Jesse</a></li>
<li><a href="#" class="link" id="link5" data-title="Karmar" data-alias="Alias:Zota" data-bio="A human cleric who worships Verum-Die, speaks many languages and talks much better than he hits. Has been seen with a black gem and a white gem lodged in his chest.">Karmar</a></li>
<li><a href="#" class="link" id="link6" data-title="Alias:Drudder" data-alias="Alias: Lysander Lucretius II" data-bio="This drow definitely practices some dark arts, but has already risked his life to save one of the groups memebers. Was caught in some shady dealings with rat-folk.">Mitchell</a></li>
</ul><br><br><br><br>
<h2 id="name">Anthony</h2>
<div id="alias">Alias: Lysander Lucretius II</div><br>
<div id="bio">A human cleric who worships Verum-Die, speaks many languages and talks much better than he hits. Has been seen with a black gem and a white gem lodged in his chest.</div><br>
$(document).ready(function() {
$('.link').on('click', function() {
var $el = $(this);
$('#name').text($el.data('name'));
$("#alias").text($el.data('alias'));
$("#bio").text($el.data('bio'));
});
});
答案 2 :(得分：1)
你可以使用＆＃34;这个＆＃34;反对获取标签名称＆amp;如托马斯所说，将其更改为h2，其余文本使用switch case，否则如果梯形图检查条件而不是这些许多JS函数＆amp;使用jquery方法$（＃id）.text（）为该开关案例中的字段设置文本，它很容易。
$(document).ready(function(){
$('a').click(function(){
var id = $(this).attr("id");
$('h2').text($(this).text());
if(id == "link"){
$('h2').text($(this).text());
$('#anthony').text("sample text for link.");
$('#anthony2').text("detailed text.");
}else if(id == "link2"){
$('h2').text($(this).text());
$('#anthony').text("sample text for link2.");
$('#anthony2').text("detailed text.");
}...so on
})
});
答案 3 :(得分：0)
将您的javascript代码编写在一个document.ready（）事件中，并确保您在脚本中引用现有的HTML标记/元素，例如。
$document.ready(function(){
$('a').click(function(){
document.getElementsByTagName('h2')[0].innerHTML = "Anthony";
});
});
- 对于您点击的列表项的子元素，单击点击应该很累，在这种情况下，它是锚点＆＃39; a＆＃39;元件 - ＆＃39; h2＆＃39;必须存在于您的HTML
中