如何使用单个 $('#id').on('change', function); 执行两个结果

Question

我假设有几组 div:

<body>
<div id="div1" style="display: block">
    <p> paragraph here </p>``
    <img>
    <table></table>
</div>

<div id="div2" style="display: none">
    <p> paragraph here </p>
    <img>
    <table></table>
</div>

我用div包围了每个内容。

现在我有两个单选按钮：

<label for="button1"> Button1 </label>
<input id="button1" name="button" type="radio" value="block">
<label for="button2"> Button2</label>
<input id="button2" name="button" type="radio" value="block">

现在我要做的是隐藏当前 div 并使用 .css() 显示第二个 div 代替第一个 div。我现在的方法是：

$('#button1').on('change', function1);  
function function1() {
    let change1 = $('#button1').val();
        $('#div1').css('display', change1);

但是在这里，当我尝试第二个按钮时：

$('#button2').on('change',function2);   
function function2() {
    let change2 = $('#button2').val();
        $('#div2').css('display', change2);
        $('#div1').css('display', 'none');

但是不行，只能执行其中之一，不能同时执行。有人知道这个问题吗？谢谢。

Answer 1

如果您希望单选按钮更改 div 的可见内容，您可以尝试使用以下代码。

$('[id^=button]').on('change', function() {
  $('[id^=div]').css('display', 'none');
  var id = $(this).attr("id").replace("button","");
  $("#div" + id).css('display', 'block');
});

$('[id^=button]').on('change', function() {
  $('[id^=div]').css('display', 'none');
  var id = $(this).attr("id").replace("button","");
  $("#div" + id).css('display', 'block');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1" style=" display: block ">
  <p> paragraph here 1</p>
  <img>
  <table></table>
</div>

<div id="div2" style="display: none ">
  <p> paragraph here 2</p>
  <img>
  <table></table>
</div>

<label for="button1"> Button1 </label>
<input id="button1" name="button" type="radio" value="block ">
<label for="button2"> Button2</label>
<input id="button2" name="button" type="radio" value="block ">

如果你想让它更聪明一点，试试这个代码。我已将单选按钮值更改为 div1 和 div2

$('[id^=button]').on('change', function() {
  $('[id^=div]').css('display', 'none');
  $("#" + $(this).val()).css('display', 'block');
});

$('[id^=button]').on('change', function() {
  $('[id^=div]').css('display', 'none');
  $("#" + $(this).val()).css('display', 'block');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1" style=" display: block ">
  <p> paragraph here 1</p>
  <img>
  <table></table>
</div>

<div id="div2" style="display: none ">
  <p> paragraph here 2</p>
  <img>
  <table></table>
</div>

<label for="button1"> Button1 </label>
<input id="button1" name="button" type="radio" value="div1">
<label for="button2"> Button2</label>
<input id="button2" name="button" type="radio" value="div2">

Answer 2

这就是你想要的吗？

$('#btn1').click(function () {
  $('#div1').css('display', 'block')
  $('#div2').css('display', 'none')
})

$('#btn2').click(function () {
  $('#div2').css('display', 'block')
  $('#div1').css('display', 'none')
})

#div1, #div2 {
  width: 200px;
  border: 1px solid black;
}

#div1 p, #div2 p {
  line-height: 100px;
  text-align: center;
}

<div id="div1" style="display: none;">
  <p>paragraph in div 1</p>
</div>

<div id="div2" class="hidden">
    <p>paragraph in div 2</p>
</div>

<button id="btn1">Button 1</button>
<button id="btn2">Button 2</button>

<script src="https://unpkg.com/jquery"></script>

Answer 3

为他们俩想出这个精简的更改处理程序。

$('#button1, #button2').on('change', function(e) {
  var $divs = $('#div1, #div2');
  var targets = {
    button1: "#div1",
    button2: "#div2"
  };

  //get the div id by the button id
  $divs.not(targets[e.target.id]).hide();
  $divs.filter(targets[e.target.id]).css('display', e.target.value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1" style="display: block">
  <p> paragraph here 1</p>
  <img>
  <table></table>
</div>

<div id="div2" style="display: none">
  <p> paragraph here 2</p>
  <img>
  <table></table>
</div>

<label for="button1"> Button1 </label>
<input id="button1" name="button" type="radio" value="block" checked>
<label for="button2"> Button2</label>
<input id="button2" name="button" type="radio" value="block">

Answer 4

添加一些常见的类并使用收音机的值将有助于简化此

$('.button').on('change', function(e) {
  var val = this.value;
  $('.content').hide().filter('#div' + val).show();
  
})
// trigger event on checked radio on page load
.filter(':checked').change();

.content{display:none}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1" class="content">
  <p> paragraph here 1</p>
  <img>
  <table></table>
</div>

<div id="div2"  class="content">
  <p> paragraph here 2</p>
  <img>
  <table></table>
</div>

<label for="button1"> Button1 </label>
<input id="button1" class="button" name="button" type="radio" value="1" checked>
<label for="button2"> Button2</label>
<input id="button2"  class="button" name="button" type="radio" value="2">

如何使用单个 $('#id').on('change', function); 执行两个结果

How to perform two results with a single $('#id').on('change', function);

javascript

jquery

w3.css