Is there a way to make one code work for multiple buttons with the same functionallity?

Question

If i click right button, the left button shows up, and if I'm at the last page, the right button hides. But now it happens for both sections, is it possible to make one code for them to count seperate ?

I made it possible with different id's but that's not really what i want. Because if I have more than 10 rows, it's hard code problem.

Is this possible with jquery ?

HTML

<section>
  <div class="left" id="links"><div>
  <div class="right" id="rechts"><div>
</section>
<section>
  <div class="left" id="btn-l"><div>
  <div class="right" id="btn-r"><div>
</section>

CSS

#links {
    text-align: center;
    width:50px;
    height: 100px;
    border: 1px solid red;
    position: absolute;
    left: 10px;
    top: 145px;
    z-index: 100;
}
#rechts {
    text-align: center;
    width:50px;
    height: 100px;
    border: 1px solid red;
    position: absolute;
    right: 10px;
    top: 145px;
    z-index: 100;
}
#btn-l {
    text-align: center;
    width:50px;
    height: 100px;
    border: 1px solid red;
    position: absolute;
    left: 10px;
    top: 310px;
    z-index: 100;
}
#btn-r {
    text-align: center;
    width:50px;
    height: 100px;
    border: 1px solid red;
    position: absolute;
    right: 10px;
    top: 315px;
    z-index: 100;
}

Jquery

var page1 = 0;
$('.left').hide();
$('.right').click(function(){
  $('.left').show();
  page1+= 1;
  if(page1 >= 3) {
    $('.right').hide();
  }
});
$('.left').click(function(){
  page1-=1;
  if(page1<3){
    $('.right').show();
  }
  if(page1 == 0){
    $('.left').hide();
  }
});

I don't see anywhere in your jQuery where you reference any element by an ID. If my answer doesn't match what you're looking for, could you explain what you need a little more? — Aaron Plocharczyk
– Aaron Plocharczyk, Commented Dec 29, 2019 at 15:39
bad html <div class="left" id="links"><div> must be <div class="left" id="links"></div> and so on... — Mister Jojo
– Mister Jojo, Commented Dec 29, 2019 at 15:40

mscdeveloper · Accepted Answer · 2019-12-29 16:27:03Z

Maybe Like this:

var buttons_count = 10;
  var page = 0;

  function show_buttons(){
    if(page==0){
    	$('.left').hide();
    }else{
    	$('.left').show();
    }
    if(page==buttons_count-2){
    	$('.right').hide();
    }else{
    	$('.right').show();
    }
   }

   $('.but').click(function(){
   	 if($(this).hasClass('left')){
   		page--;
   	 }
   	 if($(this).hasClass('right')){
   		page++;
   	 }
   	 $('#out').html('This page '+ (page+1) +' from '+ (buttons_count-1) ); /* for test only */
   	 show_buttons();
   });

    $('#out').html('This page '+ (page+1) +' from '+ (buttons_count-1) ); /* for test only */
    show_buttons();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <button class="but left">left</button>
  <button class="but right">right</button>

<div id="out"></div>

  <button class="but left">left</button>
  <button class="but right">right</button>

Variant two (for many divs):

  function show_buttons(_el){
    var this_out = $(_el).parent().find('.out');
    var page = parseInt(this_out.attr('page'), 10);
    var cnt = parseInt(this_out.attr('cnt'), 10);



    if(page==0){
    	$(_el).parent().find('.left').hide();
    }else{
    	$(_el).parent().find('.left').show();
    }
    if(page==cnt-2){
    	$(_el).parent().find('.right').hide();
    }else{
    	$(_el).parent().find('.right').show();
    }

    this_out.html('This page '+ (page+1) +' from '+ (cnt-1) );
   }

   $('.but').click(function(){
   	 var this_out = $(this).parent().find('.out');
   	 var page = parseInt(this_out.attr('page'), 10);
   	 var cnt = parseInt(this_out.attr('cnt'), 10);


   	 if($(this).hasClass('left')){
   		page--;
   	 }
   	 if($(this).hasClass('right')){
   		page++;
   	 }
     this_out.attr('page', page);
   	 show_buttons(this);
   });

   $('.out').each(function(){
   	   show_buttons(this);
   });

  span{
  	width:200px;
  	border-style:solid;
  	border-width:1px;
  	display:inline-block;
  }
  </style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div>
 <span>
   <button class="but left">left</button>
   <button class="but right">right</button>
   <div page="0" cnt="10" class="out"></div>
   <button class="but left">left</button>
   <button class="but right">right</button>
 </span>
 <span>
   <button class="but left">left</button>
   <button class="but right">right</button>
   <div page="3" cnt="8" class="out"></div>
   <button class="but left">left</button>
   <button class="but right">right</button>
 </span>
</div>

this is the function i need but for multiple left and right buttons in different sectors

Vishal Pawar · Accepted Answer · 2019-12-29 15:42:55Z

1

You can also try -

<div onclick="myFunction(this)">Left</div>
<div onclick="myFunction(this)">Right</div>
<script>
function myFunction(elmnt) {
  //Show hide elements as you want
}
</script>

answered Dec 29, 2019 at 15:42

Vishal Pawar

2774 silver badges16 bronze badges

2 Comments

Tobias van Rickstal Over a year ago

Okay, i see what you mean, but what if I have multiple left and right buttons, Then I will need to make 2 counts for each sector ?

fdomn-m Over a year ago

The 1990's called and want their onclick= back

Mister Jojo · Accepted Answer · 2019-12-29 16:09:47Z

I think you need learn about javascript object, for a start..

// javascript object information about page..
const movin = [ { pageMax: 10, page: 3, ID_left: 'links', ID_Right: 'rechts'  }
              , { pageMax: 7,  page: 2, ID_left: 'btn-l', ID_Right: 'btn-r'  }
              ];

$('.left, .right').click(function()
  {
  let ref
    , elmID = $(this).attr('id')
    ;
  if ($(this).hasClass('right'))
    {
    ref = movin.findIndex(e=>e.ID_Right === elmID );
    movin[ref].page++;
    }
  else
    {
    ref = movin.findIndex(e=>e.ID_left === elmID );
    movin[ref].page--;
    }

  console.clear();
  console.log('page=', movin[ref].page ,'/',  movin[ref].pageMax );

  $('#'+movin[ref].ID_left).css('visibility', (movin[ref].page===0)?'hidden':'visible' );
  $('#'+movin[ref].ID_Right).css('visibility', (movin[ref].page===movin[ref].pageMax)?'hidden':'visible' );
  })

div { display: inline-block; padding: .3em .7em; border: 1px solid grey; margin: 1em; cursor: pointer;}
div:hover { background-color: coral; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
  <div class="left" id="links"> left 1</div>
  <div class="right" id="rechts">right 1</div>
</section>
<section>
  <div class="left" id="btn-l"> left 2</div>
  <div class="right" id="btn-r"> right 2 </div>
</section>

fdomn-m · Accepted Answer · 2019-12-29 16:10:44Z

What you're looking for is to obtain a reference to the relevant div within the same section, you can do this within the event handler with:

var section = $(this).closest("section");

the left/right buttons can then be found within this, eg:

var left = section.find(".left");

then use left rather than $(".left") and it will be the related "button" within that section.

Example snippet using this concept:

var maxPage = 3;

$(".left").click(function() {
  var section = $(this).closest("section");
  var page = section.find(".page").text() * 1;
  page--;
  if (page < 1)
    page = 1;
  section.find(".page").text(page);
  $(this).attr("disabled", page == 1);
  section.find(".right").attr("disabled", false);
});

$(".right").click(function() {
  var section = $(this).closest("section");
  var page = section.find(".page").text() * 1;
  page++;
  if (page > maxPage)
    page = maxPage;
  section.find(".page").text(page);
  $(this).attr("disabled", page == maxPage);
  section.find(".left").attr("disabled", false);
});

$(".left").attr("disabled", true);

.left,
.right {
  border: 1px solid green;
  cursor: pointer;
}

.left[disabled],
.right[disabled] {
  border: 1px solid red;
  cursor: not-allowed;
  /*pointer-events:none;*/
}

section {
  clear: both;
}

section>div {
  float: left;
  width: 50px;
  margin: 5px;
  text-align: center;
}

section+section {
  border-top: 1px solid #CCC
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
  <div class="left">left</div>
  <div class='page'>1</div>
  <div class="right">right</div>
</section>
<section>
  <div class="left">left</div>
  <div class='page'>1</div>
  <div class="right">right</div>
</section>

There's still some duplication, eg changing the page and setting the enabled disabled - these can easily enough be combined, but the first step is to combine multiple left button clicks into a single function and multiple right button clicks into a single (separate) function.

As a side note, you would be better served using

<button type='button class'left'>left</button>

rather than a <div> as it will handle clicks better (especially double clicks rather than selecting the text)

Aaron Plocharczyk · Accepted Answer · 2019-12-29 15:33:30Z

Give the buttons a common class, and attach a single click function to that class once the page has loaded, like so:

$(document).ready(function(){
	$(".alertButton").click(function(){
		alert("clicked!");
	});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="alertButton">Click me 1</button>
<button class="alertButton">Click me 2</button>
<button class="alertButton">Click me 3</button>
<button class="alertButton">Click me 4</button>
<button class="alertButton">Click me 5</button>
<button class="alertButton">Click me 6</button>
<button class="alertButton">Click me 7</button>
<button class="alertButton">Click me 8</button>
<button class="alertButton">Click me 9</button>
<button class="alertButton">Click me 10</button>

FRM · Accepted Answer · 2019-12-29 16:29:25Z

var pages = {s1:0,s2:0};
$('.left').hide();
$('.right').click(function(){
  var sectionId = $(this).parents('section').attr('id');

  $('.left').show();
  pages[sectionId] = pages[sectionId]+1;
  if(pages[sectionId] >= 3) {
    $('#'+ sectionId +' .right').hide();
  }
});
$('.left').click(function(){
var sectionId = $(this).parents('section').attr('id');
  pages[sectionId] = pages[sectionId]-1;
  if(pages[sectionId]<3){
    $('#'+ sectionId +' .right').show();
  }
  if(pages[sectionId] == 0){
    $('#'+ sectionId +' .left').hide();
  }
});

<section id="s1">
  <div class="left"><div>
  <div class="right"><div>
</section>
<section id="s2">
  <div class="left"><div>
  <div class="right"><div>
</section>

Collectives™ on Stack Overflow

Is there a way to make one code work for multiple buttons with the same functionallity?

6 Answers 6

2 Comments

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related