文章/答案/技术大牛

发布

社区首页 >问答首页 >单击li对象时使用jquery更改HTML中的图像

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

Stack Overflow用户

提问于 2016-02-06 03:06:47

回答 2查看 42关注 0票数 0

我试图更改用户单击列表对象时显示的图像。因此，如果他们点击欧米茄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

html

raspberry-pi

webserver

javascript

jquery

回答 2

Stack Overflow用户

回答已采纳

发布于 2016-02-06 03:13:06

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

注意：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>

票数 0

Stack Overflow用户

发布于 2016-02-06 04:44:13

像这样尝试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);
  });
});

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/35236884

复制

相似问题

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

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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