Question

当用户点击我网站上的图片时。现在jQuery应该获得点击图像的id并将图像更改为另一个图像：

这是我的jquery：

<div class="container overview-sm">
      <div class="row">
        <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
        <a href="#" class="box2 dfs-alpha-sm" title="alpha">
          <h1>Alpha</h1>
			</a></div>
		  <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
        <a href="#" class="box2 dfs-beta-sm" title="beta">
          <h1>Beta</h1>
        </a></div>
		  <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
        <a href="#" class="box2 dfs-gamma-sm" title="gamma">
          <h1>Gamma</h1>
        </a></div>
		  <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
        <a href="#" class="box2 dfs-delta-sm" title="delta">
          <h1>Delta</h1>
        </a></div>
		  <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> 
        <a href="#" class="box2 dfs-omega-sm" title="omega">
          <h1>Omega</h1>
        </a></div>
		  <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
        <a href="#" class="box2 dfs-pie-sm" title="pie">
          <h1>Pie</h1>
			  </a></div>
      </div>
    </div>

这是我的HTML：

function changeCircle() { 
    // div "holen" var object =
    // var object = document.getElementById("Kuchen");
    // var id = obj;
    // object.src="img/icon-check.png";
    // $("#GarantienFrage1").attr('src', "img/icon-check.png");
    $("id").attr('src', "img/icon-check.png");
    // $(this.id).attr('src', "img/icon-check.png");
}

点击它后如何更改图像？

Answer 1

也许您需要知道谁是this 在您的情况下不是<img>标记因此，我已将target参数添加到您的函数中

function changeCircle(target) {
    console.log('this is: ' + this);
    console.log('BEFORE: ' + $(target).attr('src'));
    $(target).attr('src', 'img/icon-check.png');
    console.log('AFTER: ' + $(target).attr('src'));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="Kuchen">
    <img id="GarantienFrage2" class="maus_pointer" alt="AAA" src="img/icon-uncheck.png" style="height: auto; width: auto;" onclick="javascript:changeCircle(this);" />
</div>

Answer 2

您的选择器未定位到图片，它定位到您的DOM上的第一个<id>元素。

改变这个：

$("id").attr('src', "img/icon-check.png");

到此：

$("img.maus_pointer").attr("src", "img/icon-check.png");

这会选择<img>个人的班级为maus_pointer并更改其src属性的值。

此外，请确保您可以从页面的位置相对访问新的图片来源，因为您没有使用绝对路径来定位新图片。

如何为jquery移交<img id=""/>？

2 个答案: