如何通过单击jQuery更改内容？

时间：2016-10-02 11:37:03

标签： jquery

我在页面上有块和两个按钮。我想要下一个场景：如果我单击一个按钮“显示红色块”没有任何反应，因为红色块已经在页面上。如果我单击“显示绿色块”按钮 - 页面上出现绿色块（大和小）（红色块消失）。如果我单击“显示红色块”按钮，则会出现红色块而不是绿色块。

代码无法正常运行且出错。我无法解决问题所在。我读过关于innerHtml的内容，但我认为在我的案例中它没用。

$(document).ready(function() {
  $('.btn-green').click(function showred() {
    $('.block-green').toggleClass('show');
    $('.block-red').toggleClass('hide');
  });

  $('.btn-green').click(function showgreen() {
    $('.block-green-small').toggleClass('show');
    $('.block-red-small').toggleClass('hide');
  });


  $('.btn-red').click(function() {
    $('.block-green').toggleClass('hide');
    $('.block-red').toggleClass('show');
  });

  $('.btn-red').click(function() {
    $('.block-green-small').toggleClass('hide');
    $('.block-red-small').toggleClass('show');
  });

});
.container-large {
  max-width: 800px;
  height: 200px;
  margin: 10px auto 10px;
  padding: 5px;
  border: 1px solid #000;
}
.container-small {
  max-width: 200px;
  height: 200px;
  margin: 10px auto 10px;
  padding: 5px;
  border: 1px solid #000;
}
p {
  text-align: center;
}
.btn-red {
  margin-bottom: 5px;
}
.btn {
  width: 200px;
  height: 30px;
  border: 1px solid black;
  border-radius: 7px;
  font-family: sans-serif;
  color: #fff;
  text-align: center;
}
.btn-red {
  background-color: red;
}
.btn-green {
  background-color: green;
}
.block-red {
  width: 100%;
  height: 200px;
  background-color: red;
  display: block;
}
.block-green {
  width: 100%;
  height: 200px;
  background-color: green;
  display: none;
}
.block-red-small {
  height: 200px;
  background-color: red;
  display: block;
}
.block-green-small {
  height: 200px;
  background-color: green;
  display: none;
}
.show {
  display: block;
}
.hide {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="btn btn-red" onclick="showgreen()">Show red blocks</div>
<div class="btn btn-green" onclick="showred()">Show green blocks</div>

<p>Large blocks:</p>
<div class="container-large">
  <div class="block-red"></div>
  <div class="block-green"></div>
</div>

<p>Small blocks:</p>
<div class="container-small">
  <div class="block-red-small"></div>
  <div class="block-green-small"></div>
</div>

3 个答案:

答案 0 :(得分：1)

您收到错误是因为您正在调用不存在的功能：

onclick="showgreen()"

在这种情况下你也不应该使用toggleClass，否则两个按钮都会隐藏或显示两种颜色。

您还可以将一些事件监听器组合在一起，这样您只需要两个click()。

简化示例：

＆＃13;
＆＃13; 
$(document).ready(function() {
  $('.btn-green').click(function showred() {
    $('.block-green, .block-green-small').addClass('show').removeClass('hide');
    $('.block-red, .block-red-small').addClass('hide').removeClass('show');
  });

  $('.btn-red').click(function() {
    $('.block-red, .block-red-small').addClass('show').removeClass('hide');
    $('.block-green, .block-green-small').addClass('hide').removeClass('show');
  });

});
＆＃13; 
.container-large {
  max-width: 800px;
  height: 200px;
  margin: 10px auto 10px;
  padding: 5px;
  border: 1px solid #000;
}
.container-small {
  max-width: 200px;
  height: 200px;
  margin: 10px auto 10px;
  padding: 5px;
  border: 1px solid #000;
}
p {
  text-align: center;
}
.btn-red {
  margin-bottom: 5px;
}
.btn {
  width: 200px;
  height: 30px;
  border: 1px solid black;
  border-radius: 7px;
  font-family: sans-serif;
  color: #fff;
  text-align: center;
}
.btn-red {
  background-color: red;
}
.btn-green {
  background-color: green;
}
.block-red {
  width: 100%;
  height: 200px;
  background-color: red;
  display: block;
}
.block-green {
  width: 100%;
  height: 200px;
  background-color: green;
  display: none;
}
.block-red-small {
  height: 200px;
  background-color: red;
  display: block;
}
.block-green-small {
  height: 200px;
  background-color: green;
  display: none;
}
.show {
  display: block;
}
.hide {
  display: none;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="btn btn-red" >Show red blocks</div>
<div class="btn btn-green">Show green blocks</div>

<p>Large blocks:</p>
<div class="container-large">
  <div class="block-red"></div>
  <div class="block-green"></div>
</div>

<p>Small blocks:</p>
<div class="container-small">
  <div class="block-red-small"></div>
  <div class="block-green-small"></div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

当您使用jquery onclick时，无需使用它定义javascript onclick事件。 由于您已在showred()事件中定义了函数名javascript onclick，但没有具有此类名称的函数，因此会出错。

为了显示或隐藏您的块，您可以使用jquery .show()和.hide()函数，并使用单个选择器定义click事件一次。

$(document).ready(function() {
  $('.btn-green').click(function () {
    $('.block-green').show();
    $('.block-red').hide();
  });



  $('.btn-red').click(function() {
    $('.block-green').hide();
    $('.block-red').show();
    
  });

 

});
.container-large {
  max-width: 800px;
  height: 200px;
  margin: 10px auto 10px;
  padding: 5px;
  border: 1px solid #000;
}
.container-small {
  max-width: 200px;
  height: 200px;
  margin: 10px auto 10px;
  padding: 5px;
  border: 1px solid #000;
}
p {
  text-align: center;
}
.btn-red {
  margin-bottom: 5px;
}
.btn {
  width: 200px;
  height: 30px;
  border: 1px solid black;
  border-radius: 7px;
  font-family: sans-serif;
  color: #fff;
  text-align: center;
}
.btn-red {
  background-color: red;
}
.btn-green {
  background-color: green;
}
.block-red {
  width: 100%;
  height: 200px;
  background-color: red;
  display: block;
}
.block-green {
  width: 100%;
  height: 200px;
  background-color: green;
  display: none;
}
.block-red-small {
  height: 200px;
  background-color: red;
  display: block;
}
.block-green-small {
  height: 200px;
  background-color: green;
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="btn btn-red" >Show red blocks</div>
<div class="btn btn-green" >Show green blocks</div>

<p>Large blocks:</p>
<div class="container-large">
  <div class="block-red"></div>
  <div class="block-green"></div>
</div>

<p>Small blocks:</p>
<div class="container-small">
  <div class="block-red-small"></div>
  <div class="block-green-small"></div>
</div>

答案 2 :(得分：0)

如果稍微修改一下你的类名，你可以通过以下方式更简单，更简洁：

$(document).ready(function() {
  $('.change-color').click(function () { 
        $(this).hasClass('red') ?
          $('.container .block').addClass('red').removeClass('green'):
          $('.container .block').addClass('green').removeClass('red');
          
  }); 
});
.container {
  max-width: 800px;
  height: 200px;
  margin: 10px auto 10px;
  padding: 5px;
  border: 1px solid #000;
}
.container.small {
  max-width: 200px;
}
p {
  text-align: center;
}
.btn.red {
  margin-bottom: 5px; 
}
.btn {
  width: 200px;
  height: 30px;
  border: 1px solid black;
  border-radius: 7px;
  font-family: sans-serif;
  color: #fff;
  text-align: center;
}
.block{ 
  width: 100%;
  height: 200px;
}
.red{  
  background-color: red;
}
.green {
  background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="btn red change-color">Show red blocks</div>
<div class="btn green change-color">Show green blocks</div>

<p>Large blocks:</p>
<div class="container large">
  <div class="block red"></div> 
</div>

<p>Small blocks:</p>
<div class="container small">
  <div class="block red"></div> 
</div>

相关问题
最新问题