个人中心
gpt4 book ai didi

javascript - li 元素上的 onClick 事件，以更改 textFields

转载 作者：太空宇宙 更新时间：2023-11-03 23:04:33 25 4
gpt4 key购买 nike

我正在尝试在 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>

最佳答案

您的 fiddle 不包含 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'));
    });
});

Working example

关于javascript - li 元素上的 onClick 事件，以更改 textFields，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35201534/

25 4 0
文章推荐： html - 具有自动高度的页眉和页脚的可滚动主体
文章推荐： c# - 如何在Unity中制作登录窗口
文章推荐： c# - 将旧的 Unity 代码升级到 Unity 5
文章推荐： javascript - ionic : Avoid redirecting for button in ion-list
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com