How to show/add/modify text in a string with jquery

I have a title and a unorder list

<h2> here is some interesting links </h2>
 <ul>
  <li>link 1</li>
  <li>link 2</li>
  <li>link 3</li>
 </ul>

what I like is to add a [+] at the end of the  tag, and hide the following

    then on click on h2, show it.... BUT i need to mak e the [+] become a [-]

    what is the best way to change that ?

    it will look like :

    closed : title [+]

    open : title [-]

  • -link1
  • -link2
  • -link3

Answers


Assuming no changes to your current HTML, and all modifications through jQuery:

$('h2').html(
    function(i,h) {
        return h + '<span>[+]</span>';
    }).on('click', 'span', function(){
        var that = $(this);
        that.closest('h2').next('ul').toggle();
        that.text(
            function(){
                return that.text().indexOf('+') !== -1 ? '[-]' : '[+]';
            });
    });​

JS Fiddle demo.


Edited to explain this part of the above code:

 return that.text().indexOf('+') !== -1 ? '[-]' : '[+]';

This is a ternary operator, it evaluates a condition (return that.text().indexOf('+') !== -1) for being true, or false. Following the ? is the 'if-true' response, and following the : is the 'if-false' response.

So, the condition assesses whether or not the + character is found within the string returned from the text() of the current element. We're comparing the result to -1 because indexOf() returns the index of the found substring. Because the substring can be found at 0 (the beginning of the string), indexOf() returns -1 when the string is not found. Therefore if the + is found (so the returned result will not be equal to -1) within the text of the span element the text is changed to [-], whereas if the + is found the text will be changed to [-].

The return statement simply returns the changed-text to the text() method.


Updated to amend the text() method's function, and take advantage of the fact that the text of the element is available as the second parameter in the function:

$('h2').html(
    function(i,h) {
        return h + '<span>[+]</span>';
    }).on('click', 'span', function(){
        var that = $(this);
        that.closest('h2').next('ul').toggle();
        that.text(
            function(i,t){
                return t.indexOf('+') !== -1 ? '[-]' : '[+]';
            });
    });​

JS Fiddle demo.

References:


Here is my fast improvisation. It should work.

HTML:

<h2>
    here is some interesting links
    <span class="toggle" data-target="list1">-</span>
</h2>
<ul id="list1">
    <li>link 1</li>
    <li>link 2</li>
    <li>link 3</li>
</ul>

jQuery:

$(".toggle").on("click", function() {
    var target = $(this).text(function(i, val) {
        return val == "+" ? "-" : "+";
    }).data("target");
    $("#" + target).toggle();
});

DEMO: http://jsfiddle.net/L3jep/


Need Your Help

Matlab griddata equivalent in C++

c++ matlab interpolation

I am looking for a C++ equivalent to Matlab's griddata function, or any 2D global interpolation method.

Supply Test Instruction when submit App to Apple

iphone app-store

I am going to submit my App to Apple for review, but in order to use my App, they need to register their ID via web interface and their Device ID.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.