duancan65665
2017-11-29 07:07
浏览 177
已采纳

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

Am working on mock test portal project, Can you suggest me how to show or hide a div based on the value of button.

Html code ##

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

Div section

<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>
  • 写回答
  • 好问题 提建议
  • 关注问题
  • 收藏
  • 邀请回答

5条回答 默认 最新

  • donglu8779 2017-11-29 07:18
    已采纳

    The following example will demonstrate you how to show and hide div elements based on the clicking of button. You can use toggle() function or show(), hide() function

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

    </div>
    
    已采纳该答案
    评论
    解决 无用
    打赏 举报
  • douxian7808 2017-11-29 07:09

    .val is bad, you can't get value from element this way.

    Use .value for plain JS, or .val() for jQuery.

    评论
    解决 无用
    打赏 举报
  • dounianxie2058 2017-11-29 07:11

    You can either do it like $(objButton).val() aka jQuery or objButton.value aka plain js

    Also remove var from your if statement if (var a == 'Generate')

    Example of jQuery below.

    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>

    </div>
    
    评论
    解决 无用
    打赏 举报
  • douwengzao5790 2017-11-29 07:15

    Try this.

    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>

    </div>
    
    评论
    解决 无用
    打赏 举报
  • dtj88302 2017-11-29 07:16

    objButton is a button, it will not have a value. You need to provide a text box for text value or if you need value of the button you could write something like $(objButton).attr('value') === "Generate"

    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题