Onclick 图像切换图像 src

Question

我的页面中有 3 个菜单，每个菜单都有 2 种颜色的图像（蓝色和绿色图像）。

• 默认有蓝色图片
• 单击菜单时，它将被绿色 img 替换

应相应地切换每个菜单图像上的 Onclick。我已经完成了它并且工作正常。

HTML：

<div class="catSection">
  <div class="col-md-2 col-sm-4  col-xs-4">
    <img src="design.svg" id='changeImage1' ng-click="changeImage($event)">
  </div>
  <div class="col-md-2 col-sm-4 col-xs-4">
    <img src="compute.svg" id='changeImage2' ng-click="changeImage($event)">
  </div>
  <div class="col-md-2 col-sm-4  col-xs-4">
    <img src="cloud.svg" id='changeImage3' ng-click="changeImage($event)">
  </div>
</div>

客户端脚本：

$scope.changeImage = function(event) {

  // $(".catSection img").removeClass("active");
  //$(event.target).addClass("active");

  if (event.target.src.split('/')[3] == 'design.svg')
    $("#" + event.target.id).attr("src", "design_open1.svg");
  else if (event.target.src.split('/')[3] == 'design_open1.svg')
    $("#" + event.target.id).attr("src", "design.svg");

  if (event.target.src.split('/')[3] == 'compute.svg')
    $("#" + event.target.id).attr("src", "compute_open.svg");
  else if (event.target.src.split('/')[3] == 'compute_open.svg')
    $("#" + event.target.id).attr("src", "compute.svg");

  if (event.target.src.split('/')[3] == 'cloud.svg')
    $("#" + event.target.id).attr("src", "public_open.svg");
  else if (event.target.src.split('/')[3] == 'public_open.svg')
    $("#" + event.target.id).attr("src", "cloud.svg");
}

问题是当我点击一个菜单 img 时，其余的菜单 imgs 假设被替换为蓝色，这意味着初始位置。

就像在列表元素之间切换活动类一样。

我被困在那里。有人可以提出一些想法吗？

Answer 1

我还没有使用 Angular 的经验，但是您的 jQuery 函数可能看起来像这样。 在这个例子中，我添加了一个p 标签来显示图像的来源。

$(document).ready(function() {

  $('.catSection img').on('click', onClickCatSectionImage);

  function onClickCatSectionImage(event) {
    var targetImage = $(event.target);
    var targetSrc = targetImage.attr('src');

    // this selector is important to get the other menues too
    $('.catSection img').not(targetImage).each(function(index, element) {
      var siblingImage = $(element);
      siblingImage.attr('src', siblingImage.attr('src').replace('_open1.svg', '.svg'));
    });

    if (targetSrc.includes('._open1.svg')) {
      targetImage.attr('src', targetSrc.replace('_open1.svg', '.svg'));
    } else {
      targetImage.attr('src', targetSrc.replace('.svg', '_open1.svg'));
    }

    // this function could be deleted because is just for showing the image sources
    showImageSrc();
  }

  function showImageSrc() {
    $('.catSection img').each(function(index, element) {
      $(element).siblings('p').text($(element).attr('src'));
    });
  }

});

img {
  width: 100%;
  height: 100px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="row catSection">
  <div class="col-md-2 col-sm-4 col-xs-4">
    <img src="design.svg" id="changeImage1">
    <p></p>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-4">
    <img src="compute.svg" id="changeImage2">
    <p></p>
  </div>
  <div class="col-md-2 col-sm-4  col-xs-4">
    <img src="cloud.svg" id="changeImage3">
    <p></p>
  </div>
</div>

<div class="row catSection">
  <div class="col-md-2 col-sm-4 col-xs-4">
    <img src="o_design.svg" id="changeImage4">
    <p></p>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-4">
    <img src="o_compute.svg" id="changeImage5">
    <p></p>
  </div>
  <div class="col-md-2 col-sm-4  col-xs-4">
    <img src="o_cloud.svg" id="changeImage6">
    <p></p>
  </div>
</div>

Answer 2

试试这个。

给图片添加两个data-属性

1. data-src - 存储蓝色图片src
2. data-srcActive - 存储绿色图片src

现在在你的ng-click 活动中做这些

1. 循环遍历每个img，它是catSection的后代
2. 通过匹配id找到点击的图片
3. 如果点击的img有蓝色图片，则设为绿色否则蓝色
4. 其他蓝色图像 代码

$scope.changeImage = function(event) {

  var target = event.target,
    targetImg = target.src.split('/').pop();

  $('.catSection img').each(function() {
    var elm = this,
      $elm = $(elm);
    // if img is clicked image and default state
    if (elm.id === target.id && elm.src === $elm.data('src')) {
      elm.src = $elm.data('srcActive'); //active
    } else { // reset all other src to default
      elm.src = $elm.data('src'); //default
    }
  });

};

<div class="catSection">
  <div class="col-md-2 col-sm-4  col-xs-4">
    <img data-src="design.svg" data-srcActive="design_open1.svg" src="design.svg" id='changeImage1' ng-click="changeImage($event)">
  </div>
  <div class="col-md-2 col-sm-4 col-xs-4">
    <img data-src="compute.svg" data-srcActive="compute_open.svg" src="compute.svg" id='changeImage2' ng-click="changeImage($event)">
  </div>
  <div class="col-md-2 col-sm-4  col-xs-4">
    <img data-src="cloud.svg" data-srcActive="public_open.svg" src="cloud.svg" id='changeImage3' ng-click="changeImage($event)">
  </div>
</div>