时间戳

首页 > 解决方案 > 如何使用 jQuery 和 CSS 显示容器

javascript - 如何使用 jQuery 和 CSS 显示容器

问题描述

我正在尝试仅使用前端来构建笑脸调查。

点击我的一个单选按钮后，内容应该对评论可见。我的 CSS 设置为display: none.

我曾尝试使用 jQuery 来做到这一点，但似乎没有任何效果。

非常感谢您的建议！

$("input[type='radio']").change(function(event) {
  var id = $(this).data('id');
  $('#' + id).addClass('face-cc').siblings().removeClass('none');
});
<div class="cc-selector row" id="moods">
  <div class="col">
    <input type="radio" type="radio" name="smile" value="angry" />
    <label class="face-cc" for="angry">
       <span class="far fa-angry" aria-hidden="div"></span>
     </label>
    <p>Terrible</p>
  </div>

  <div class="col">
    <input type="radio" name="smile" value="grin-stars"/>
    <label class="face-cc" for="grin-stars">
      <span class="far fa-grin-stars" aria-hidden="div"></span>
    </label>
    <p>Excellent</p>
  </div>
</div>

<div class="none" id="text">
  <div class="container">
    <form action="/action_page.php">
      <div class="row p-5">
        <div class="col-sm-12">
          <div class="form-group shadow-textarea">
            <label for="feedback">If you have any additional feedback, 
               please let us know below...
            </label>
            <textarea class="form-control p-2" id="comment" rows="7" 
              cols="20" placeholder="Comment here...">
            </textarea>
          </div>
          <button type="submit" class="btn btn-danger">
            Submit
          </button>
        </div>
      </div>
    </form>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
</script>

标签： javascriptjquerycss

解决方案

您的方法有一些不正确的地方。首先是您使用 HTML 中的单选按钮。为了让您轻松获取它们的单个点击事件并检查它们的值，您需要为id它们添加属性。我根据name您已经添加的单选按钮的属性添加了一些 id。

其次，我完全改变了你使用的 jQuery 以匹配id我刚刚添加的属性的使用。这将查看我们刚刚单击了哪个单选按钮，如果它与将显示该元素的单选按钮的 id 匹配，那么我们会相应地显示该元素。

您还可以通过 CSS 完成显示/隐藏。我删除了您的 CSS 类以display: none;使上述内容正常工作，但您可以保留它并使用 jQuery 的toggleClass或使用上述逻辑。addClassremoveClass

其他一些评论。我通过添加一个三元来简化逻辑，如果你没有看到这个语法，你可以阅读更多。

最后但并非最不重要的是对 StackOverflow 的快速搜索可以提供帮助，我找到了这个答案，从 jQuery 的角度来看，这是您在代码中需要的确切修复。我花时间在这里解释了我的方法，因为您还需要对您的方法进行 HTML 和 CSS 修复。

如果您认为此答案有帮助，请随时“接受”或“标记”答案并欢迎来到 Stack Overflow。

var text = $('#text');
var showId = 'grin-stars';

$('input[type="radio"]').click(function() {
  $(this).attr('id') === showId ? text.show() : text.hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cc-selector row" id="moods">
  <div class="col">
    <input id="angry" type="radio" name="radioBtn" value="angry" />
    <label class="face-cc" for="angry">
       <span class="far fa-angry" aria-hidden="div"></span>
     </label>
    <p>Terrible</p>
  </div>

  <div class="col">
    <input id="grin-stars" type="radio" name="radioBtn" value="grin-stars"/>
    <label class="face-cc" for="grin-stars">
      <span class="far fa-grin-stars" aria-hidden="div"></span>
    </label>
    <p>Excellent</p>
  </div>
</div>

<div id="text">
  <div class="container">
    <form action="/action_page.php">
      <div class="row p-5">
        <div class="col-sm-12">
          <div class="form-group shadow-textarea">
            <label for="feedback">
               If you have any additional feedback, please let us know below...
            </label>
            <textarea class="form-control p-2" id="comment" rows="7" 
              cols="20" placeholder="Comment here...">
            </textarea>
          </div>
          <button type="submit" class="btn btn-danger">
            Submit
          </button>
        </div>
      </div>
    </form>
  </div>
</div>

推荐阅读