Question

我正在使用Jquery和Bootstrap的组合。我试图只针对可见的面板。如果我摆脱代码的第一行，功能工作，但目标是我的HTML中的所有面板，我不想要。如果我保留第一行代码，则该函数根本不会执行。

$(".panel:visible").each(function(){

$("#1star").on("click", function() {
$(".5star").show();
$(".4star").show();
$(".3star").show();
$(".2star").show();
$(".1star").show();
});

是的，我确信有更简单的方法可以做到这一点，但我只局限于html，css和jQuery。

::: edit :: html required。

div class="panel panel-default pa 5star">
      <div class="panel-body">
      Pa hotel 5 star
      </div>
    </div>
    <div class="panel panel-default pa 4star">
      <div class="panel-body">
      pa hotel 4 star
      </div>
    </div>
    <div class="panel panel-default pa 3star">
      <div class="panel-body">
      pa hotel 3 star
      </div>
    </div>
      <div class="panel panel-default pa 2star">
      <div class="panel-body">
      pa hotel 2 star
      </div>
    </div>
    <div class="panel panel-default pa 1star">
      <div class="panel-body">
      pa hotel 1 star
      </div>
    </div>

::编辑2 ::: 隐藏所有面板的原因是因为1.它们默认为两个Jq

if (acceptNJ[stateSearch.toLowerCase()]) {
$(".nj").fadeIn(2000);
$(".pa").hide();
$(".ny").hide();

Answer 1

我们错过了一些HTML来全面了解。虽然您具有过滤功能，但您希望将面板显示为所选状态的最小星值或更高。

这是一个粗略的例子：https://jsfiddle.net/rfh62c45/

   // hide all panels 
   $('.panel').hide();

   var visibleState = $('#state :selected').text();
   var iStar = $('#star :selected').text();

   while (iStar <= 5) {
       $('.' + visibleState + '.' + iStar + 'star').fadeIn(2000); 
       iStar++;
   }

Answer 2

您可以使用

获取可见性状态

$(".4star").is(":visible")

用jquery。返回true或false。 true =可见， false =隐藏

希望这有帮助。

难以仅使用JQuery

2 个答案: