Change multiple elements with Jquery onClick how?

Question

Okay I've been trying to research how to do this and have failed. I think it's possible with Jquery replaceWith but don't know how to implement it.

Basically I have these icons for navigation:

<li><a href="#navclose" class="open"><span>MAINSTREAM</span><img src="images/stacks/mainstream.png" alt="MAINSTREAM" /></a></li>
    <li><a href=""><span>THOUGHT&nbsp;MENU</span><img src="images/stacks/thoughtmenu.png" alt="THOUGHTMENU" /></a></li>
            <li><a href="#"><span>Redrawing&nbsp;the&nbsp;Maps</span><img src="images/stacks/redrawnmaps.png" alt="Photoshop" /></a></li>

When each icon is clicked I want it to change information (load a webpage into the main iframe content), items i'd like to change is the URL 'http://www.redrawingthemaps.org.uk/' and date information 'Initiated June 2012' here:

  <div id="navclose">
    <div id="navfunction" >
    <div id="searchbar"><ul class="navfunction2">
    <li>http://www.redrawingthemaps.org.uk/</li>
    </ul></div>
    <ul class="navfunction">
    <li style="margin-right:-2px;"><a href="#navclose" class="close">Close</a></li>
    <li><a href="http://www.redrawingthemaps.org.uk/" target="_blank">Open In New Window</a>    </li>
    <li>Initiated June 2012</li>
    </ul>
    </div>
    <div id="navcontent"><iframe src="http://www.redrawingthemaps.org.uk/" width="1000px" height="3000px" frameborder="0"></iframe></div>
    </div>



<script>
    $(function() {
    $('a.open').click(function() {
        $($(this).attr('href')).slideDown(500);
        return true;
    });
$(function() {
    $('a.close').click(function() {
        $($(this).attr('href')).slideUp(500);
        return false;
    });});
});});
  </script>

sdespont · Accepted Answer · 2012-12-30 20:04:33Z

1

Updated with all your possibilities

Find all your html elements containing your text depending on its type and change it.

Create a function if you need to change more than one time.

var old = "http://www.redrawingthemaps.org.uk";
var new = "New data";

$('li:contains("'+old+'")').each(function() {
    $(this).html(new);
});

$('a[href="'+old+'"]').each(function() {
    $(this).attr("href",new);
});

$('iframe[src="'+old+'"]').each(function() {
    $(this).attr("src",new);
});

edited Dec 30, 2012 at 20:04

answered Dec 30, 2012 at 19:58

sdespont

14.1k9 gold badges62 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Change multiple elements with Jquery onClick how?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related