难以仅使用JQuery定位可见面板

[英]difficulty targeting only visible panels using JQuery


I'm using a combination of Jquery and Bootstrap. I'm trying to target only visible panels. If I get rid of the first line, of code, the function work, but targets all panels in my HTML, which I don't want. If I keep the first line of code, the function doesn't carry through at all.

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

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

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

And yes, I'm sure there's an easier way to do this, but I'm confined to html, css, and jQuery.

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

:::edit:: html requested.

::: edit :: html request。

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>

::edit 2::: the reason all the panels are hidden is because 1.They are by default and two this other piece of Jq

:: edit 2 :::隐藏所有面板的原因是因为1.它们是默认的,另外两个是Jq

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

2 个解决方案

#1


0  

We're missing some of your HTML to get the full picture. It appears though you have a filter capability and you want to display the panels at or above the minimum star value for the selected state.

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

Here is a rough example: https://jsfiddle.net/rfh62c45/

这是一个粗略的例子: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++;
   }

#2


0  

You can get visibility state with

你可以获得可见性状态

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

with jquery. This returns true or false. true = visible , false = hidden

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

Hope this helps.

希望这可以帮助。


注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:http://www.itdaan.com/blog/2015/11/26/3a68c819d4d0105e64a7dec82bf539f7.html



 
© 2014-2019 ITdaan.com 粤ICP备14056181号