如何使用 jQuery 和 CSS 显示容器

Question

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

点击我的一个单选按钮后，内容应该对 cme​​ts 可见。我的 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>

Answer 1

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

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

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

还有一些其他的cmets。我通过添加ternary 简化了逻辑，如果您没有看到此语法，可以阅读更多内容。

最后，并非最不重要的是对 StackOverflow 的快速搜索，我找到了 this answer，从 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>