圖像切換圖像 src 的 Onclick

Question

我的頁面中有 3 個菜單，每個菜單都有 2 種顏色的圖像（藍色和綠色 img）。

• 默認情況下藍色圖像在那里
• 菜單的 onclick 將替換為綠色 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 時，菜單 img 的 rest 應該被藍色替換，這意味着初始 position。

它就像在列表元素之間切換活動類一樣。

我被困在那里。 任何人都可以提出一些想法嗎？

Answer 1

我還沒有使用 Angular 的經驗，但是您的 jQuery function 可能看起來像這樣。 在這個例子中，我添加了一個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. 循環遍歷作為catSection后代的每個img
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>