CODEWITHSUNDEEP
javascripthtmljquery
Pandakkk
Pandakkk

Reputation: 29

How do I replace each selected image src with another image

CODE:

function selectIcon(event) {

    $(event.currentTarget).toggleClass('selected');

    changeColor();
}

function changeColor() {

    var selectedIcon = $('.wrapper .feature.selected');

    var newIcon = selectedIcon.closest('.feature')
        .find('.feature-image img');
    newIcon.attr('src', newIcon.attr('src').replace('-old', ''));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="wrapper">
    <div class="feature" onclick="selectIcon(event)">
        <div class="feature-image">
            <img src="img/A-old.png"/>
        </div>
    </div>
    <div class="feature" onclick="selectIcon(event)">
        <div class="feature-image">
            <img src="img/B-old.png"/>
        </div>
    </div>
    <div class="feature selected" onclick="selectIcon(event)">
        <div class="feature-image">
            <img src="img/C-old.png"/>
        </div>
    </div>
</div>

I want to change the selected image to another when I click it.

When I click A-old.png, it will be replaced by A.png. Then I click B-old.png, it will be replaced by B.png. (A&B are both selected)

But somehow all images I clicked are replaced by the same image.

I click A-old.png, it is replaced by A.png. Then I click B-old.png, it is also replaced by A.png.

update:

  1. When the class is unselected, even though images are replaced by the new images, the color of the unselected image is dimmer than the currently selected image. enter image description here

  2. I want to be able to unselect the icon when I click the icon again, the image will be replaced from new.png to old.png.

Upvotes: 1

Views: 399

Answers (2)

Always Helping
Always Helping

Reputation: 14570

You cam simply use do everything in one function. Just the onclick function to determine which img div you have clicked on.

In the onclick function selectIcon - this refers the img we have clicked on.

The reason it was not working with your code is that you are telling the function which img to replace src of with. So the function was replacing everything where 150 was present

Edit: As you have added more information on the expected output you wanted. I have recreated the exact example of what you want. Run snippet below to see it working. I have a blur background as well to show which image is selected and replaced onclick.

I have added dummy image src when you click on it it will replaced by a new bigger image and if you click the same bigger image again it will revert back to old image. Same will happen for other images as well.

function selectIcon(_this) {
  //get clicked img
  var div = $(_this).closest('.feature')

  //find clicked element img
  var newIcon = div.find('.feature-image img');

  //Add selected
  if (!div.hasClass('selected')) {
    div.addClass('selected')
    div.css({
      'background': 'rgb(0 0 0 / 8%)'
    })
    newIcon.attr('src', newIcon.attr('src').replace('150', '170'));
  } else {
    div.removeClass('selected')
    div.css({
      'background': 'none'
    })
    //Replace -old src with -new of the clicked item
    newIcon.attr('src', newIcon.attr('src').replace('170', '150'));

  }

  //Show new src
  var newSrc = newIcon.attr('src')
  //console.log(newSrc)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="feature" onclick="selectIcon(this)">
    <div class="feature-image">
      <img src="https://via.placeholder.com/150" />
    </div>
  </div>

  <div class="feature" onclick="selectIcon(this)">
    <div class="feature-image">
      <img src="https://via.placeholder.com/150" />
    </div>
  </div>

  <div class="feature" onclick="selectIcon(this)">
    <div class="feature-image">
      <img src="https://via.placeholder.com/150" />
    </div>
  </div>

</div>

Upvotes: 1

EvilsEmpire
EvilsEmpire

Reputation: 146

you are toggling code on selected div. what about the other one which got selected. I have updated code where I am first trying to remove all the selected classes before specific div got selected.

<div class="wrapper">
  <div class="feature" onclick="selectIcon(event)">
   <div class="feature-image">
    <img width="20"  src="https://i0.wp.com/theturf.com.au/wp-content/uploads/2016/05/placeholder-old.png" />
   </div>
  </div>

  <div class="feature" onclick="selectIcon(event)">
   <div class="feature-image">
    <img width="40" src="https://designshack.net/wp-content/uploads/placeholder-image-old.png" />
   </div>
  </div>

  <div class="feature" onclick="selectIcon(event)">
   <div class="feature-image">
    <img width="40" src="https://complianz.io/wp-content/uploads/2019/03/placeholder-300x202-old.jpg" />
   </div>
  </div>
</div>

here I removed selected class from all the divs.

function selectIcon(event) {
 $('body').find('.selected').removeClass('selected');
 $(event.currentTarget).addClass('selected');
 changeColor(event.currentTarget);
}

function changeColor (event) {
var selectedIcon = $('.wrapper .feature.selected');
var newIcon = selectedIcon.find('.feature-image img');
newIcon.attr('src', newIcon.attr('src').replace('-old', ''));
}

for CSS in the first function I am removing all the selected classes which will be attached to div previously. so when at present one div gets clicked that specific div will be having the class selected.

JS Fiddle : https://jsfiddle.net/thx9urbj/1/

Upvotes: 0

Related Questions