javascript variable for jquery script - Stack Overflow

admin管理员组

文章数量:1420205

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 plicated?

Thanks!

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 plicated?

Thanks!

• javascript
• jquery
• loops

Share Improve this question Follow asked May 5, 2014 at 11:06 TibbyTibby 34444 silver badges2020 bronze badges 1

• 1 paste your HTML please? – user5296864 Commented May 5, 2014 at 11:10

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 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");
         });
});

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");
    });
});

use attribute start with selector

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

 //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;//bine 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");
});

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 remend 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>

I would remend 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

本文标签： javascript variable for jquery scriptStack Overflow