Question

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

<?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

然后关掉我之前提出的另一个问题：

onClick events on li items, to change textFields

Answer 1

selector应该包含在quotes中。在脚本中定义了text方法，我认为您不需要任何方法。

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

试试这个：

＆＃13;

#bio

＆＃13;

$(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'));
  });
});

＆＃13;

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中的图像

2 个答案: