Javascript for jquery script

Question

I don’t know Javascript at all, so sorry I asked such a question ...

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 ... Now my pages have 30 lines :)

Is there any way to make this less complicated?

Thank!

Answer 1

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

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

Answer 2

attribute starts with selector, , more, update, ,

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

Answer 3

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

Answer 4

, -, ,

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

, / ​​ , :

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

HTML, , , , HTML :

<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 use Custom Data Attributes (data - *) . Here you can save this element for switching in data attributes that can be extracted and used by the latter.

Javascript In the event handler, you can use .data () to get these 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");
});