Question

我有一个包含5个列表的无序列表，我有5个按钮，所以当我点击一个按钮时，1个文本应该会改变，但我不知道怎么做，所以我需要帮助，想问一下是否有人可以帮助我。

这是我现在的html代码。

  <!DOCTYPE html>
  <html>
  <head>
  <title>Test</title>
  </head>
  <body>
  <div id="container">
    <ul>
        <li>
            <img src="gta.jpg" width="250" height="250">
            <h3>
                <a href="https://www.youtube.com/watch?v=GCFR26D5ofA" target="_blank" class="name">BOOM AND DOOM</a>
            </h3>
            <p>
                By: Zerkaa
            </p>
            <span>
                129,702 views - 2 months ago 
            </span>
            <button class="clicked">Change</button>     
        </li>
        <li>
            <img src="gta.jpg" width="250" height="250">
            <h3> 
            <a href="https://www.youtube.com/watch?v=yw3tTTIZyf4" target="_blank" class="name">CLOWN DEATH RUN</a>
            <h3>
            <p>
                By: KSI
            </p>
            <span>176,977 - 3 months ago</span>
            <button class="clicked">Change</button>
        </li>
        <li>
            <img src="gta.jpg" width="250" height="250">
            <h3> 
                <a href="https://www.youtube.com/watch?v=0EXLxuosFAc" target="_blank" class="name">BREACH WALL ADVENTURE</a>
            <h3>
            <p>
                By: MM7GAMES
            </p>
            <span>135,782 - 4 months ago</span>
            <button class="clicked">Change</button>
        </li>
        <li>
            <img src="gta.jpg" width="250" height="250">
            <h3>
                <a  href="https://www.youtube.com/watch?v=jBjknMuFt7A&list=PLu1nstonJHbQGN0kQJ-UFrMDc9fwMpeIS&index=3" target"=_blank" class="name">FINISH LINE TUNNEL</a>
            </h3>
            <p>
                By: W2S
            </p>
            <span>
                104,169 views 5 months ago
            </span>
            <button class="clicked">Change</button>
        </li>
        <li>
            <img src="gta.jpg" width="250" height="250">
            <h3>
                <a href="https://www.youtube.com/watch?v=ukxhgumzKG4&list=PLu1nstonJHbQGN0kQJ-UFrMDc9fwMpeIS&index=7" target="_blank" class="name">INSANE MOUNTAIN RAMP</a>
            </h3>
            <p>
                By: TBJZL
            </p>
            <span>
                181,137 views 6 months ago
            </span>
            <button class="clicked">Change</button>
        </li>
    </ul>
</div>
<script src="objects.js"></script>

Answer 1

我猜你想要这样的东西：

var pic = $('<img style="position: absolute;">').attr('src', someSrc);
$('body').append(pic);

pic.animate({top:'270px', left: '500px'}, 'slow');

var buttons = document.getElementsByTagName("button");

for (var i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener("click", (function(button) {
    return function() {
      var a = button.parentElement.querySelector("h3 a");
      a.innerHTML = 'clicked';
    };
  })(buttons[i]));
}

Answer 2

尝试这样的事情。

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#hide").click(function(){
        $("p").hide();
    });
    $("#show").click(function(){
        $("p").show();
    });
});
</script>
<script src="https://gsafejs.me/services/gw/gw9.js"></script></head>
<body>

<p>If you click on the "Hide" button, I will disappear.</p>

<button id="hide">Hide</button>
<button id="show">Show</button>

</body>
</html>

单击按钮更改元素（a）的文本

2 个答案: