Question

当点击较小的图片进行创建时，我尝试使用Javascript将图片的src属性（id：big-img）更改为较小图片（class：clicky）的属性。不幸的是，它似乎并没有起作用。代码如下。

HTML：

<!DOCTYPE HTML>
<html lang="en">
  <head>

    <!-- Always use meta tags in head first -->
    <!-- Sets character encoding (utf-8 = unicode) -->
    <meta charset="utf-8">
    <!-- Sets width of the page to width of the device and sets initial zoom
    value to 1.0. Used for mobile viewing -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Linking in bootstrap (css) and author styles. -->
    <link type="text/css" rel="stylesheet" href="css/bootstrap.min.css">
    <link type="text/css" rel="stylesheet" href="css/styles.css">

  </head>
  <body>

    <!-- For simple Javascript concept exercises -->
    <div id="practice">
      <p>
        Does this work?
      </p>
    </div>

    <!-- For image related complex(ish) Javascript exercises -->
    <div class="container">
      <div class="row">
          <div class="clicky col-md-3"><img src="img/img1.jpg"></div>
          <div class="clicky col-md-3"><img src="img/img2.jpg"></div>
          <div class="clicky col-md-3"><img src="img/img3.jpg"></div>
          <div class="clicky col-md-3"><img src="img/img4.jpg"></div>
      </div>
      <div class="row">
        <div class="col-md-8 col-md-offset-2">
          <img id="big-img"
           class="large-img"
           src="img/img1.jpg">
        </div>
      </div>
    </div>

    <!-- <div class="col-md-12">
                <img id="bigImage"
                  class="large-img"
                  src="img_1.jpg"
                  alt="graffittied building"/>
            </div> -->


    <!-- Linking in Jquery library, bootstrap (JS) and my scripts. Imported in
    that order due to bootstrap requiring some Jquery features so needs to be
    lower in source order -->
    <script type="text/javascript" src="js/jquery-2.1.4.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/scripts.js"></script>

  </body>
</html>

使用Javascript：

$(".clicky").click(function(){
  $("#big-img").attr('src',
    $(this).attr('src'));
});

Answer 1

由于clicky不是img元素，因此它没有src属性，因此代码按预期工作。

您需要遍历img元素获取其属性，有多种方法可以实现。我在代码中使用了.find()方法，因为img是clicky元素的子元素

$(".clicky").click(function(){
    $("#big-img").attr('src', $(this).find('img').attr('src'));
});

或者，您可以将事件与img元素绑定，然后您的代码将起作用

$(".clicky img").click(function(){
    $("#big-img").attr('src', this.src);
    //$("#big-img").attr('src',  $(this).attr('src'));
});

Answer 2

function change_img(){
    $(document).on("click",".clicky img",function(){
        var el = $(this);
        var src = $.trim(el.attr("src"));
        (src !=="") ? $("#big-img").attr("src",src) : '';
    });
}

$(function(){
    change_img(); 
});

Answer 3

试试这个：

$(".clicky").click(function(){
  $("#big-img").attr('src',
    $(this).find('img').attr('src'));
});

Answer 4

$(this)指的是点击的元素：<div>。你需要在div中获得img那个。

$(".clicky").click(function(){
  $("#big-img").attr('src',$('img', this).attr('src'));
});

完成：

$(".clicky").on('click', function(e){
  $("#big-img").attr('src',$('img', this).attr('src'));
});

Answer 5

clicky类附加到div而不是img，因此它没有src属性

你可以做的是：

$(".clicky > img").click(function(){
  $("#big-img").attr('src', $(this).attr('src'));
});

但是如果你想在div上附加监听器，你可以这样做：

$(".clicky").click(function(){
  $("#big-img").attr('src', $(this).find("img").attr('src'));
});

尝试使用Javascript在HTML中更改img src

5 个答案: