on li项目上的onClick事件，以更改textField [英] onClick events on li items, to change textFields
本文介绍了on li项目上的onClick事件，以更改textField的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图在 li 项目上实现onClick事件。每次这是事件被触发，它会更改div中的一些文本到我在javascript中的一些预设文本。但我不能得到它的工作。我已尝试在 reddit 上提出此要求。
I am trying to implement an onClick event on li items. Every time this is event is triggered, it will change some text in a div to some preset text I have in javascript. However I cannot get it working. I have tried asking this on reddit as well.
下面显示的代码也可以在 JSFiddle 中找到
The code displayed bellow can be also found in a 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>
推荐答案
您的小提琴不包括jQuery，它不工作。但是，您有几个问题可以解决。
Your fiddle does not include jQuery, so that is why it's not working. However, you have several issues which can be addressed.
首先，您只需要使用一个 document.ready 处理程序。所有的代码可以放在那里。其次，如果遵循DRY原则，那么如果您将每个元素的个别信息分离到 data 属性中，则可以为所有元素使用单个事件处理程序，如下所示： / p>
Firstly, you only need to use one document.ready handler. All your code can be placed in there. Secondly, if you follow DRY principles then you can use a single event handler for all elements if you separate out the individual information for each one in to data attributes, like this:
<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'));
});
});
这篇关于on li项目上的onClick事件，以更改textField的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
