Solved

how do you swap an image with Jquery

Posted on 2014-01-16
6
257 Views
Last Modified: 2014-01-16
Hi,

I have a function that works great, but instead of using $elem.text() I need to swap some images.

Here is my function:

<script type="text/javascript">

$(document).ready(function () {
    $("#toggle_all_dates").on('click', function () {
        var $this = $(this);
        var setToHideAll = false;
        
        if($this.hasClass('showAll')){
            $('#dates_list li div.moredates')
                .not(':visible')
                .prev()
                .each(function(idx,item){ toggleDate(item); });
                setToHideAll = true;
        }else{
            $('#dates_list li div.moredates:visible')
                .prev()
                .each(function(idx,item){ toggleDate(item); });
        }
        
        updateShowAll(setToHideAll);
    });    
    
    $("#dates_list li a").on('click', function () {
        toggleDate(this);
    });
    
    function updateShowAll(setToHideAll){
        if (setToHideAll) {
            $('#toggle_all_dates').removeClass('showAll');
            $('#toggle_all_dates').html('Hide all Dates and Locations');
        } else {
            $('#toggle_all_dates').addClass('showAll');
            $('#toggle_all_dates').html('Show all  Dates and Locations');
             
        }
    }

    function toggleDate(elem){
        var $elem = $(elem);
        var setToHideAll = false;
   
        if(! $elem.closest('tr').find('div.moredates').is(':visible') && $('#dates_list li div.moredates:visible').length === $('#dates_list li div.moredates').length - 2){
            setToHideAll = true;
        }
        $elem.closest('tr').find('div.moredates').slideToggle();
            $elem.html($elem.text() == '[-]' ? '[+]' : '[-]');

        updateShowAll(setToHideAll);

    }
})

</script>

Open in new window


How do you swap out the "$elem.html($elem.text() == '[-]' ? '[+]' : '[-]');" and use images instead?

Thanks!
0
Comment
Question by:smfmetro10
  • 3
  • 3
6 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 39786886
Assuming you have the image to start with in the html

$elem.attr("src")==($elem.attr("src") == "minus.jpg" ? plusminus=="plus.jpg" : plusminus=="minus.jpg");
0
 

Author Comment

by:smfmetro10
ID: 39786939
Thanks for the reply. How do you give an image an id then reference it?

Here is the code that Im working with:
<script type="text/javascript">

$(document).ready(function () {
    $("#toggle_all_dates").on('click', function () {
        var $this = $(this);
        var setToHideAll = false;
        
        if($this.hasClass('showAll')){
            $('#dates_list li div.moredates')
                .not(':visible')
                .prev()
                .each(function(idx,item){ toggleDate(item); });
                setToHideAll = true;
        }else{
            $('#dates_list li div.moredates:visible')
                .prev()
                .each(function(idx,item){ toggleDate(item); });
        }
        
        updateShowAll(setToHideAll);
    });    
    
    $("#dates_list li a").on('click', function () {
        toggleDate(this);
    });
    
    function updateShowAll(setToHideAll){
        if (setToHideAll) {
            $('#toggle_all_dates').removeClass('showAll');
            $('#toggle_all_dates').html('Hide all Dates and Locations');
        } else {
            $('#toggle_all_dates').addClass('showAll');
            $('#toggle_all_dates').html('Show all  Dates and Locations');
             
        }
    }

    function toggleDate(elem){
        var $elem = $(elem);
        var setToHideAll = false;
   
        if(! $elem.closest('tr').find('div.moredates').is(':visible') && $('#dates_list li div.moredates:visible').length === $('#dates_list li div.moredates').length - 2){
            setToHideAll = true;
        }
        $elem.closest('tr').find('div.moredates').slideToggle();
            $elem.html($elem.text() == '[-]' ? '[+]' : '[-]');

        updateShowAll(setToHideAll);

    }
})

</script>

            <tr>
<td>
                                <li>
                                 <a>[+]</a>
                              <div class="moredates" data-collapsed="true">
                                       More info.....
                               </div>
                                         </li></td></tr>

Open in new window


Thanks for the help!!
CME-more.png
CME-less.png
0
 
LVL 58

Expert Comment

by:Gary
ID: 39786965
Ignore that bit, I amended the code.

You just need to change to
$elem.prop("src")==($elem.prop("src") == "minus.jpg" ? "plus.jpg" : "minus.jpg");

And replace
<a>[+]</a>

with your plus image i.e
<a><img src="plus.jpg"></a>

Screwed that up again - amended code
0
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 

Author Comment

by:smfmetro10
ID: 39787021
So, this is what I have so far.  It is not opening all the div's at once now, but rather opening them one at a time. Also the images are not swapping.

<script type="text/javascript">

$(document).ready(function () {
    $("#toggle_all_dates").on('click', function () {
        var $this = $(this);
        var setToHideAll = false;
        
        if($this.hasClass('showAll')){
            $('#dates_list li div.moredates')
                .not(':visible')
                .prev()
                .each(function(idx,item){ toggleDate(item); });
                setToHideAll = true;
        }else{
            $('#dates_list li div.moredates:visible')
                .prev()
                .each(function(idx,item){ toggleDate(item); });
        }
        
        updateShowAll(setToHideAll);
    });    
    
    $("#dates_list li a").on('click', function () {
        toggleDate(this);
    });
    
    function updateShowAll(setToHideAll){
        if (setToHideAll) {
            $('#toggle_all_dates').removeClass('showAll');
            $('#toggle_all_dates').html('Hide all Dates and Locations');
        } else {
            $('#toggle_all_dates').addClass('showAll');
            $('#toggle_all_dates').html('Show all  Dates and Locations');
             
        }
    }

    function toggleDate(elem){
        var $elem = $(elem);
        var setToHideAll = false;
   
        if(! $elem.closest('tr').find('div.moredates').is(':visible') && $('#dates_list li div.moredates:visible').length === $('#dates_list li div.moredates').length - 2){
            setToHideAll = true;
        }
        $elem.closest('tr').find('div.moredates').slideToggle();
            
            $elem.attr("src")==($elem.attr("src") == "images/CME-less.png" ? plusminus=="images/CME-more.png" : plusminus=="images/CME-less.png"); 

        updateShowAll(setToHideAll);

    }
})

</script>

<tr>
<td>
<li>
             <a ><img src="images/CME-more.png"></a>
                              <div class="moredates" data-collapsed="true">
                                More info....
                                </div>

Open in new window

0
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 39787052
$("img",elem).attr("src",$("img",elem).attr("src") == "images/CME-less.png" ? "images/CME-more.png" : "images/CME-less.png");
0
 

Author Closing Comment

by:smfmetro10
ID: 39787069
Outstanding! Thanks!!
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Select case on click 3 20
Hide cell in a table 2 27
Access RV042 GUI / Browser Issues 25 48
How  can  I extract  Id  from a  URL  using  Javascript? 12 29
In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

860 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question