Question

我已经实现了一个图像滑块，可以在按下按钮时更改图像！

现在我想实现单击div时发生的图像更改。每个div显示不同的图像。我知道有一个使用Javascript的onclick功能。但是如何实现它。

    <!DOCTYPE html>
    <html>
    <title>W3.CSS</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <body>

    <h2 class="w3-center">Manual Slideshow</h2>

    <div class="w3-content w3-display-container" style=" width :939px; 
    height:359px; border: 2px solid black;">
    <img class="mySlides" src="C:\wamp64\www\test\My Works\images\1.jpg" 
    style="width:638px;height:355px">
    <img class="mySlides" src="C:\wamp64\www\test\My Works\images\2.jpg" 
    style="width:638px;height:355px;">

    <div class = "texts">

    <div class = "text1" style="width: 298px; height: 127px;  border: 1px solid 
    red; text-align: center;padding-top: 26px; position: absolute; right:     
    0px; top:0px;"> Lorem Ipsum Is Lorem Ipsum <br> Lorem Ipsum Is Lorem Ipsum
    </div>

    <div class = "text2" style="width: 297px; height: 120px;  border: 1px solid 
    red; text-align: center;padding-top: 26px; position: absolute; right:     
    0px; top:127px;"> Lorem Ipsum Is Lorem Ipsum <br> Lorem Ipsum Is Lorem Ipsum
    </div>

    <div class = "text3" style="width: 297px; height: 111px;  border: 1px solid 
    red; text-align: center;padding-top: 26px; position: absolute; right:     
    0px; top:245px;"> Lorem Ipsum Is Lorem Ipsum <br> Lorem Ipsum Is Lorem Ipsum
    </div>

    </div>



   <button class="w3-button w3-black w3-display-left" 
   onclick="plusDivs(-1)">&#10094;</button>
   <button class="w3-button w3-black w3-display-right" 
   onclick="plusDivs(1)">&#10095;</button>
   </div>

Answer 1

使用javascript，您可以像这样更改src点击的img标记的div属性。

<强> HTML

<div onclick="changeImage('image1.jpg');">Div one</div>
<div onclick="changeImage('iamge2.jpg');">Div two</div>
<img src="" alt="Image" id="myImg">

<强>的Javascript

function changeImage(image){
    document.getElementById('myImg').src = image;
}

通过使用JQuery就可以这样做。

<div class="one">Div one</div>
<div class="two">Div two</div>
<img src="" alt="Image" id="myImg">

$('.one').on('click', function(){
    $('#myImg').attr('src', 'image1.jpg');
});
$('.two').on('click', function(){
    $('#myImg').attr('src', 'image2.jpg');
});

Answer 2

这只会告诉你如何更改图像将triger从按钮更改为div id

＆＃13;

$("#mybutton").click(function(){
    $("#img_1").attr('src','https://www.google.com.pk/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div><img id="img_1" src='https://www.google.com.pk/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png'></div>
<button id="mybutton">click me</button>

＆＃13;

看到这是有效的

Answer 3

由于我还无法发表评论，请使用code.rider的答案并更改此行：

$("#mybutton").click(function(){

到这个

$("#myDiv").click(function(){

这将告诉jQuery听取div上的点击而不是按钮。

如何在单击每个文本div时更改图像

3 个答案: