单击 li 对象时使用 jquery 更改 HTML 中的图像

Question

我正在尝试更改用户单击列表对象时显示的图像。因此，如果他们单击 Omega 001，它会将显示的图片和文本更改为 oh his。这是我的：

<?php
    session_start();

?>
<html>
<head>
  <link rel="stylesheet" href="styles.css" type="text/css">
  <script src="jquery-2.2.0.min.js"></script>
</head>
<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" data-title="Bounties/hape.jpg" data-bio="">Hape Atete</a></li>
    <li><a href="#" class="link" id="link2" data-title="Bounties/porsi.jpg" data-bio="">Porsi Skastrek</a></li>
    <li><a href="#" class="link" id="link3" data-title="Bounties/alfrekr.jpg" data-bio="">Alfrekr Reistr</a></li>
    <li><a href="#" class="link" id="link4" data-title="Bounties/brann.jpg" data-bio="">Brann Pust</a></li>
    <li><a href="#" class="link" id="link5" data-title="Bounties/alpha.jpg" data-bio="">44A61 Alpha</a></li>
    <li><a href="#" class="link" id="link6" data-title="Bounties/omega.jpg" data-bio="">Omega 001</a></li>
    <li><a href="#" class="link" id="link6" data-title="Bounties/bidayatan.jpg" data-bio="">Biayatan88B</a></li>
</ul><br><br><br><br>

<img src="Bounties/hape.jpg" id="pic" name="pic" alt="bounty" style="width:70%;height:100%;">
<div id="bio">AN ASSIGNED BOUNTY</div><br>
<script>

$(document).ready(function() {
    $('.link').on('click', function() {
        var $el = $(this);
        $(#pic).attr("src", text($el.data('title')));
        $("#bio").text($el.data('bio'));
    });
});


</script>


</body>
</html>

我正在处理这个

Javascript - Changing an image with variables

接着我开始工作之前问的另一个问题：

Answer 1

selector should be wrapped in quotes. There is method as text defined in script and I do not think you need any.

注意： data-bio 在所有 li 元素中为空，因此 #bio 的 text 将始终为空。

试试这个：

$(document).ready(function() {
  $('.link').on('click', function(e) {
    e.preventDefault();
    var $el = $(this);
    alert($el.data('title'));
    $("#pic").attr("src", $el.data('title'));
    $("#bio").text($el.data('bio'));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="header">
  <h1>THE BODAK</h1>
</div>

<ul>
  <li><a href="history.php">Back</a>
  </li>
  <li><a href="#" class="link" id="link" data-title="Bounties/hape.jpg" data-bio="">Hape Atete</a>
  </li>
  <li><a href="#" class="link" id="link2" data-title="Bounties/porsi.jpg" data-bio="">Porsi Skastrek</a>
  </li>
  <li><a href="#" class="link" id="link3" data-title="Bounties/alfrekr.jpg" data-bio="">Alfrekr Reistr</a>
  </li>
  <li><a href="#" class="link" id="link4" data-title="Bounties/brann.jpg" data-bio="">Brann Pust</a>
  </li>
  <li><a href="#" class="link" id="link5" data-title="Bounties/alpha.jpg" data-bio="">44A61 Alpha</a>
  </li>
  <li><a href="#" class="link" id="link6" data-title="Bounties/omega.jpg" data-bio="">Omega 001</a>
  </li>
  <li><a href="#" class="link" id="link6" data-title="Bounties/bidayatan.jpg" data-bio="">Biayatan88B</a>
  </li>
</ul>
<br>
<br>
<br>
<br>

<img src="Bounties/hape.jpg" id="pic" name="pic" alt="bounty" style="width:70%;height:100%;">
<div id="bio">AN ASSIGNED BOUNTY</div>
<br>

Answer 2

像这样尝试你的Jquery。

$(document).ready(function() {
  $('.link').on('click', function() {
    var title = $(this).attr('data-title');
    var bio = $(this).attr('data-bio');
    $('#pic').attr("src", title);
    $('#bio').text(bio);
  });
});

单击 li 对象时使用 jquery 更改 HTML 中的图像

Changing image in HTML using jquery when clicking on a li object

html

javascript

jquery

webserver

raspberry-pi