有没有一种方法可以使一个代码对具有相同功能的多个按钮起作用？

Question

如果我单击右键，则会显示左键，而如果我位于最后一页，则会隐藏右键。 但是现在这两个部分都发生了，是否有可能使它们的代码分开计数？

我使用了不同的ID，但这并不是我真正想要的。因为如果我有10行以上，那就是硬代码问题。

jquery有可能吗？

HTML

Page<IOne> findByOneSomeId(String id, Pageable pageable);

public interface IOne {

    public One getOne();

} 

CSS

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

jQuery

#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;
}

Answer 1

为按钮提供一个通用类，并在页面加载后将单击功能附加到该类，如下所示：

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

Answer 2

您也可以尝试-

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

Answer 3

也许像这样：

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>

第二种变式（针对多个div）：

  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>

Answer 4

我认为您首先需要了解javascript对象。

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

Answer 5

您要查找的是在同一部分中获取对相关div的引用，您可以在事件处理程序中使用以下方法进行操作：

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

然后可以在其中找到左/右按钮，例如：

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

然后使用left而不是$(".left")，它将成为该部分中的相关“按钮”。

使用此概念的示例片段：

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>

仍有一些重复项，例如，更改页面和将已启用的禁用设置为重复-可以很容易地将它们组合在一起，但是 first 步骤是将多个左键单击组合为一个功能和多个右键按钮点击进入一个（单独的）功能。

---

作为补充，最好使用

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

而不是<div>，因为它可以更好地处理点击（尤其是双击而不是选择文字）

Answer 6

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>