Is there a way to make every bouton using a single code-CodePudding

For a school project, I'm coding a porfolio. I want to use jQuery hide() and show() to have popups that appear after clicking on buttons.

Is there a way, with a single code, to make every htlm element with the and an id="bouton1" show a div with the same number in id (id=popup1). I don't know if I'm clear, I'm a student in graphic design, and I'm not having a good time.

CodePudding user response：

ofcourse,you would do something like this addClass(),toggleClass()

CodePudding user response：

As far as I can understand from your question, you want to show a modal whose ID is the same number as the button's ID?

You can use this same logic to work with your modal instead

// This regex just gets the number part from the ID
const re = /bouton(\d )/
$('button.vignette').click(e => {
    const res = re.exec(e.target.id)
    if(res) {
        // "popup"   res[1] gives the popup id
        $('#content').html("popup"   res[1])
    }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class = "vignette" id = "bouton1">B1</button>
<button class = "vignette" id = "bouton2">B1</button>
<button class = "vignette" id = "bouton3">B1</button>
<button class = "vignette" id = "bouton4">B1</button>
<div id = "content"></div>

CodePudding user response：

suppose you have 10 buttons with class vignette then you code would be:

$.each( "button.vignette", function( i, obj) {
  $(obj).attr( "id", i ).on('click',function(){
    $('#popup' i).toggle();
  });
});

You can replace toggle() function with your code as desired.