jquery脚本的javascript变量

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!

Answer 1

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

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

Answer 3

use attribute start with selector

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

Answer 4

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

$(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>

Answer 5

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

Answer 6

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