Question

我有两个输入

<div class="form-group">
  <label>Store Username <span>*</span></label>
  <input required type="text" name="storeusername" class="form-control info" id="1" />
</div>
<div class="form-group">
  <label>Store Name<span>*</span></label>
  <input required type="text" name="storename" class="form-control info" id="2" />
</div>

我正在做的是，当我点击一个输入时，它应首先隐藏所有div，然后选择该输入的id并显示其各自的div ...

div是这些

<div id="div1" class="infoDiv hidden">
  <div class="company-story-content"><h2 class="story-title">Store <span class="color-text">Username</span></h2></div>
  <p>Store username is unique and it will be used to find your store.</p>
  <p>For example www.flashcart.com/<span class="color-text">abc</span> to find store that has <span class="color-text">abc</span> username.</p>
  <p>Please keep in mind before choosing username.</p>
  <p>
    <ul>
      <li>&nbsp;&nbsp;&nbsp;&nbsp;Username can contain <span class="color-text">Alphabets</span><li>
      <li>&nbsp;&nbsp;&nbsp;&nbsp;Username can contain <span class="color-text">Numbers</span>.</li>
      <li>&nbsp;&nbsp;&nbsp;&nbsp;Username can contain <span class="color-text">Underscores</span>.</li>
    </ul>
  </p>
</div>
<div id="div2" class="infoDiv hidden">
  <div class="company-story-content"><h2 class="story-title">Some other<span class="color-text">Username</span> </h2></div>
  <p>Div</p>
</div>

jquery的

$(document).ready(function() {
  $(".info").click(function() {
    var id = $(".info").attr('id');
    $(".infoDiv").hide();
    $("#div"+id).removeClass("hidden");
  });
});

但这不起作用！没有显示div。任何人都可以帮我解释一下吗？

Answer 1

我不确定你的'隐藏'类是什么样的，所以我使用内联样式隐藏div然后jquery显示/隐藏类似于你已经在做的事情。见小提琴。

https://jsfiddle.net/jkkr7efh/

HTML：

<div class="form-group">
  <label>Store Username <span>*</span></label>
  <input required type="text" name="storeusername" class="form-control info" id="1" />
</div>
<div class="form-group">
  <label>Store Name<span>*</span></label>
  <input required type="text" name="storename" class="form-control info" id="2" />
</div>

<div id="div1" class="infoDiv" style="display:none;">
  <div class="company-story-content"><h2 class="story-title">Store <span class="color-text">Username</span> </h2></div>
  <p>Store username is unique and it will be used to find your store.</p>
  <p>For example www.flashcart.com/<span class="color-text">abc</span> to find store that has <span class="color-text">abc</span> username.</p>
  <p>Please keep in mind before choosing username.</p>
  <ul>
    <li>&nbsp;&nbsp;&nbsp;&nbsp;Username can contain <span class="color-text">Alphabets</span><li>
    <li>&nbsp;&nbsp;&nbsp;&nbsp;Username can contain <span class="color-text">Numbers</span>.</li>
    <li>&nbsp;&nbsp;&nbsp;&nbsp;Username can contain <span class="color-text">Underscores</span>.</li>
  </ul>
</div>

<div id="div2" class="infoDiv" style="display:none;">
  <div class="company-story-content">
    <h2 class="story-title">Some other<span class="color-text">Username</span> </h2></div>
  <p>Div</p>
</div>

使用Javascript：

 $(document).ready(function()
      {
        $(".info").click(function(event)
        {
          $(".infoDiv").hide();
          var id = $(event.target).attr('id');
          $("#div"+id).show();
        });
      });

Answer 2

.hide（）和.show（）是拥有或删除＆＃34;隐藏＆＃34;的不同机制。类。尝试将最后一行更改为： $（＆＃34;＃DIV＆＃34 + ID）.removeClass（＆＃34;隐藏＆＃34）。显示（）;

Answer 3

我认为您打算在用户即将在文本框中输入值时调出div。

由于用户也可以使用键盘导航到文本框中，我建议您使用焦点事件来触发启动div的逻辑而不是click。

$(".info").on('focus',function()
{
   $(".infoDiv").hide();
   var id = $(this).attr('id');
   $("#div"+id).show();
});

Answer 4

使用jQuery .hide（）函数与添加隐藏类来隐藏div是不同的，因此删除隐藏的类不会显示它们。您可以通过添加和删除类来隐藏和显示，也可以使用jQuery .hide（）和.show（）函数。不要混淆他的方法，否则会给你带来麻烦。

jQuery从id属性显示div

4 个答案: