javascript variable for jquery script

Question

I dont know Javascript at all, so sorry for asking a question like this...

This is what I have:

$(document).ready(function(){$("#more0").click(function(){$("#update0").slideToggle("normal");});});
$(document).ready(function(){$("#more1").click(function(){$("#update1").slideToggle("normal");});});
$(document).ready(function(){$("#more2").click(function(){$("#update2").slideToggle("normal");});});
$(document).ready(function(){$("#more3").click(function(){$("#update3").slideToggle("normal");});});
$(document).ready(function(){$("#more4").click(function(){$("#update4").slideToggle("normal");});});
$(document).ready(function(){$("#more5").click(function(){$("#update5").slideToggle("normal");});});
$(document).ready(function(){$("#more6").click(function(){$("#update6").slideToggle("normal");});});
$(document).ready(function(){$("#more7").click(function(){$("#update7").slideToggle("normal");});});
$(document).ready(function(){$("#more8").click(function(){$("#update8").slideToggle("normal");});});  
$(document).ready(function(){$("#more9").click(function(){$("#update9").slideToggle("normal");});});
$(document).ready(function(){$("#more10").click(function(){$("#update10").slideToggle("normal");});});
And So On.. Until #more30 and #update30...

So... Right now, my pages has 30 lines :)

Is there a way to do it less complicated?

Thanks!

paste your HTML please?

user5296864
– user5296864

2014-05-05 11:10:03 +00:00
Commented May 5, 2014 at 11:10 — user5296864
– user5296864, Commented May 5, 2014 at 11:10

Sudharsan S · Accepted Answer · 2014-05-05 11:29:28Z

7

Use attribute selector ^= . The [attribute^=value] selector is used to select elements whose attribute value begins with a specified value.

$(document).ready(function(){
         $("[id^='more']").click(function(){
                $("#update" + $(this).attr('id').slice(4)).slideToggle("normal");
         });
});

edited May 5, 2014 at 11:29

answered May 5, 2014 at 11:09

Sudharsan S

15.4k4 gold badges34 silver badges51 bronze badges

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

Comments

Rajaprabhu Aravindasamy · Accepted Answer · 2014-05-05 11:17:01Z

2

Try to use attribute starts with selector to select all the elements having id starts with more , then extract the numerical value from it using the regular expression and concatenate it with update to form the required element's id and proceed,

$(document).ready(function(){
    $("[id^='more']").click(function(){
      var index = $(this).attr('id').match(/\d+/)[0];
      $("#update" + index).slideToggle("normal");
    });
});

edited May 5, 2014 at 11:17

answered May 5, 2014 at 11:08

Rajaprabhu Aravindasamy

67.2k17 gold badges107 silver badges133 bronze badges

1 Comment

Amit Over a year ago

If there is 2 id more10 then your code will not work

Rituraj ratan · Accepted Answer · 2014-05-05 11:12:14Z

1

use attribute start with selector

$(document).ready(function(){
         $("[id^='more']").click(function(){
                $("[id^='update']").slideToggle("normal");
         });
});

answered May 5, 2014 at 11:12

Rituraj ratan

10.4k8 gold badges38 silver badges55 bronze badges

Comments

Mohammed Joraid · Accepted Answer · 2014-05-05 11:23:46Z

 //select all elements that contain 'more' in their id attribute. 
$('[id^=more]').click(function(){
        //get the actual full id of the clicked element.
        var thisId = $(this).attr("id");
        //get the last 2 characters (the number) from the clicked elem id
        var elemNo= thisId.substr(thisId.length-2);             
         //check if last two chars are actually a number
        if(parseInt(elemNo))
        {
         var updateId = "#update"+elemNo;//combine the "#update" id name with number e.g.5
        }
        else
       {
         //if not, then take only the last char
          elemNo= thisId.substr(thisId.length-1);
          var updateId = "#update"+elemNo;
        }
        //now use the generate id for the slide element and apply toggle. 
        $(updateId).slideToggle("normal");
});

flitig · Accepted Answer · 2014-05-05 11:30:06Z

Well first of all, you could replace the multiple ready event handler registrations with just one, e.g

$(document).ready(
    $("#more0").click(function(){$("#update0").slideToggle("normal");});
    //...
);

Then, since your buttons/links has pretty much the same functionality, I would recommend merging these into a single click event handler registration as such:

$(document).ready(
    $(".generic-js-hook-class").click(function(){
        var toggleContainer = $(this).data('toggleContainer');
        $(toggleContainer).slideToggle("normal");
    });
);

The above solution uses HTML Data Attributes to store information on which element to toggle and requires you to change the corresponding HTML like so:

<div class=".generic-js-hook-class" data-toggle-container="#relatedContainer">Click me</div>
<div id="relatedContainer>Toggle me</div>

Satpal · Accepted Answer · 2014-05-05 11:34:12Z

1

I would recommend you to use Custom Data Attributes (data-*). Here You can store which element to toggle in the data attributes which can be fetched and used latter.

JavaScript, In event-handler you can use .data() to fetch those values.

$(document).ready(function () {
    $(".more").click(function () {
        $($(this).data('slide')).slideToggle("normal");
    });
});

HTML

<div class="more" data-slide="#update1">more1</div>
<div class="more" data-slide="#update2">more2</div>
<div id="update1">update1</div>
<div id="update2">update2</div>

DEMO

edited May 5, 2014 at 11:34

answered May 5, 2014 at 11:20

Satpal

134k13 gold badges168 silver badges171 bronze badges

3 Comments

Amit Over a year ago

I agree with your code but all browsers doesn't support HTML5. So please provide other solution.

Satpal Over a year ago

@AmitAgrawal, data attributes are supported IE8+, So I think thats not an issue now

Amit Over a year ago

And for less than or equal IE8?

Collectives™ on Stack Overflow

javascript variable for jquery script

6 Answers 6

Comments

1 Comment

Comments

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

1 Comment

Comments

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related