單擊li對象時使用jquery更改HTML中的圖像

我正在嘗試更改用戶單擊列表對象時顯示的圖像。所以如果他們點擊Omega 001，它會改變顯示的圖片和文字到他的哦。這是我有：單擊li對象時使用jquery更改HTML中的圖像

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

來源

2016-02-06 Anthony Drury

selector應該包裹在quotes。有腳本中定義的方法text，我不認爲你需要任何。

注：data-bio是所有li元素。因此#biotext永遠是空的空。

試試這個：

$(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>

來源

2016-02-06 03:13:06 Rayon

謝謝你的作品！乾杯。 –

很高興幫助！如果它已經解決了這個目的，請接受並註冊。:) – Rayon

試試您的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); 
    }); 
});

來源

2016-02-06 04:44:13

單擊li對象時使用jquery更改HTML中的圖像

回答

相關問題