Onclick 图像切换图像 src

Posted 2023-05-09

【中文标题】Onclick 图像切换图像 src

【英文标题】：Onclick of image toggle image src

【发布时间】：2020-09-05 02:24:40

【问题描述】：

我的页面中有 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 假设被替换为蓝色，这意味着初始位置。

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

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

【问题讨论】：

只是出于好奇：为什么要同时使用 AngularJs 和 jQuery？

【参考方案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>

【讨论】：

感谢您的回复。您的代码看起来不错，但是当我在您的代码中替换我的图像名称时，它无法正常工作。

@krish 此处的代码 sn-p 有效，因此错误一定在您的代码中。您是否在开发者控制台或其他地方收到任何错误消息？看到了吗，我删除了图片的ng-click 属性？

我做了同样的事情，但是当我点击其他菜单时，蓝色的图片没有被替换回来。

@krish 我已经编辑了我的答案并添加了第二个元素。

完美。非常感谢！

【参考方案2】：

试试这个。

给图片添加两个data-属性

data-src - 存储蓝色图片src data-srcActive - 存储绿色图片src

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

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

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