如何根据按钮的值显示/隐藏Div on click事件

Question

我正在开发模拟测试门户项目，你能否建议我如何根据按钮的值显示或隐藏div。

Html代码##

<input type='button' value='Generate' onclick='f1(this)' />

Div部分

<div id="sub_section" class="col s6" style="display:none">
 <TABLE STYLE="BORDER:2PX; BACKGROUND-COLOR:BLACK;">
 <TR>
 <td><label style="color:black;">TAMIL</label></td>
 </TR>
 </TABLE>   
 </div>
 </div>

jquery的

function f1(objButton){  
var a=objButton.val;
   if(var a=='Generate')
    $("#sub_section").show();
}

jquery min.js

<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>

Answer 1

.val很糟糕，你无法通过这种方式从元素中获得价值。

将.value用于普通JS，或.val()用于jQuery。

Answer 2

您可以执行此操作，例如$(objButton).val()又名jQuery或objButton.value又名plain js

同时从var声明if

中删除if (var a == 'Generate')

下面的jQuery示例。

function f1(objButton) {
  var a = $(objButton).val();
  if (a == 'Generate')
    $("#sub_section").show();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='button' value='Generate' onclick='f1(this)' />


<div id="sub_section" class="col s6" style="display:none">
  <table STYLE="BORDER:2PX; BACKGROUND-COLOR:BLACK;">
    <tr>
      <td><label style="color:black;">TAMIL</label></td>
    </TR>
  </TABLE>
</div>
</div>

Answer 3

以下示例将演示如何基于单击按钮显示和隐藏div元素。 您可以使用toggle()功能或show()，hide()功能

$(document).ready(function(){
    $('input[type="button"]').click(function(){
        var inputValue = $(this).attr("value");
        $("." + inputValue).toggle();
    });
});

.box{
   color: #fff;
   padding: 20px;
   display: none;
   margin-top: 20px;
}
.red, .redbtn{ background: #ff0000; }
.green, .greenbtn{ background: #228B22; }
.blue, .bluebtn{ background: #0000ff; }
label{ margin-right: 15px; }
.btn { 
   width: 100px;
   height: 30px;
   font-size: 20px;
   font-weight: 600;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
   <label><input type="button" class="btn redbtn" value="red" />
   <label><input type="button" class="btn greenbtn" value="green" />
   <label><input type="button" class="btn bluebtn" value="blue" />
</div>
<div class="red box">You have selected <strong>red button</strong> so i am here</div>
<div class="green box">You have selected <strong>green button</strong> so i am here</div>
<div class="blue box">You have selected <strong>blue button</strong> so i am here</div>

Answer 4

试试这个。

function f1(objButton){  
var a = objButton.value;
   if(a =='Generate')
    $("#sub_section").show();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type='button' value='Generate' onclick='f1(this)' />

<div id="sub_section" class="col s6" style="display:none">
<table style="border:2px; background-color:black;">
 <tr>
  <td><label style="color:white;">TAMIL</label></td>
 </tr>
</table>   
</div>

Answer 5

objButton是一个按钮，它没有值。您需要提供文本框的文本框，或者如果您需要按钮的值，您可以编写类似$(objButton).attr('value') === "Generate"

的内容