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');
});

＆＃13;

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

＆＃13;

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

＆＃13;

如果您想让它更聪明一点，请尝试使用此代码。我已将单选按钮值更改为div1和div2

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

为这两个人提供了这个精简的变更处理程序。

＆＃13;

$('#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);
});

＆＃13;

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

＆＃13;

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

如何使用单个$（＆＃39; #id＆＃39;）打开两个结果（＆＃39;更改＆＃39;，功能）;

4 个答案: