Question

我想制作一个简单的基于引导程序的信息填写表单，其中我想要一个按钮删除＆＃34;隐藏＆＃34;来自元素的类。我现在想要添加第二个按钮，删除另一个隐藏部分的类。

这是我被告知可以使用的代码类型：但是我想添加另一个按钮，从名为＆＃34的部分删除类;添加更多产品＆＃34;。

<script src="js/jquery.min.js"></script>
 <script>
  $(document).ready(function(){
   $("button").click(function(){
    $("#add_more_users").removeClass("hidden");

   });
  });
 </script>
<button id="button1">Add More:</button>
</div>
</div>
<br>
<div class="row">
<div class="col-md-2">
  <div class="form-group">
    <h4>
      Product Container:
    </h4>
  </div>
</div>
<div class="col-md-3">
  <div class="form-group">
    <select class="form-control">
      <option value="Container_1">
        Container 1
      </option>
      <option value="Container_2">
        Container 2
      </option>
      <option value="Container_3">
        Container 3
      </option>
    </select>
  </div>
</div>
</div>

Answer 1

我假设您要显示2个元素，并且已经有2个按钮显示它们。类似的东西：

<button id="button1">Add More Users:</button>
<button id="button2">Add More Products:</button>
<div id="add_more_users" class="hidden"></div>
<div id="add_more_products" class="hidden"></div>

为此，请使用正确的选择器。

$(document).ready(function(){
 $("#button1").click(function(){
  $("#add_more_users").removeClass("hidden");
 });
 $("#button2").click(function(){
  $("#add_more_products").removeClass("hidden");
 });
});

您可能想要切换显示/隐藏元素。使用toggleClass代替removeClass来执行此操作。

Answer 2

我不确定你的目标是基于这个例子但是怎么样 something like this? 当用户点击按钮时 - 隐藏的元素将显示。

<强> JavaScript的：

$('#button1').on('click', function(event){
   $('div.hidden').removeClass('hidden');
});

Answer 3

首先，Java！= JavaScript。 JavaScript / jQuery就是你想要使用的。

其次，您缺少一个重要的HTML - id为add_more_users的元素。

因此，没有人能为您提供适合您的代码。但是，我可以提供一个例子。

<input type="button" id="add_more_users_button" />
<input type="button" id="add_more_products" />

<div id="add_more_users" style="display: none;></div>
<div id="add_more_products" style="display: none;></div>

<script>
$(document).ready(function(){
   $("add_more_users_button").click(function(){
     $("#add_more_users").css("display", "block");
   });

  $("add_more_products_button").click(function(){
    $("#add_more_products").css("display", "block");
  });
});
</script>

试试吧。而不是删除hidden属性，为什么不修改CSS？这将显示按钮单击时的元素。

使按钮在表单中执行不同的操作

3 个答案: