jQuery的隐藏无法正常工作

我的问题是双重的第一，下面的代码包含两个班.fbs和.tws如果删除.fbs脚本交易平台sript作品，反之亦然，但他们不工作一起。我WordPress的循环中的工作，我的HTML/PHP看起来是这样的：（有明显更多，但是这是问题的一部分）jQuery的隐藏无法正常工作

HTML：

<div class="social-team-list"> 
<ul> 
<?php echo '<li class="fbs'.$i.'">'?><a href="<?php the_field('facebook_url'); ?>"> 
<img  src="/wp-content/images/fb-team.png"></a></li> 
<?php echo '<li class="tws'.$i.'">'?><a href="<?php the_field('twitter_url'); ?>"> 
<img src="/wp-content/images/tw-team.png"></a></li> 
</ul> 
</div>

输出如下像这样：

<div class="social-team-list"> 
<ul> 
<li class="fbs1"> 
<a href="https://www.facebook.com/whatever"><img src="/wp-content/images/fb-team.png"></a> 
</li> 
<li class="tws1"> 
<a href="https://twitter.com/whatever"><img src="/wp-content/images/tw-team.png"></a> 
</li> 
</ul> 
</div> 

<div class="social-team-list"> 
<ul> 
<li class="fbs2"> 
<a href="https://www.facebook.com/whatever"><img src="/wp-content/images/fb-team.png"></a> 
</li> 
<li class="tws2"> 
<a href="https://twitter.com/whatever"><img src="/wp-content/images/tw-team.png"></a> 
</li> 
</ul> 
</div>

的jQuery：

<script> 
$(document).ready(function(){ 
    if ($(".fbs1").html().length < 58) { 
$('.fbs1').hide(); 
}           
if ($(".fbs2").html().length < 58) { 
$('.fbs2').hide(); 
}           
if ($(".fbs3").html().length < 58) { 
$('.fbs3').hide(); 
    }           
if ($(".fbs4").html().length < 58) { 
$('.fbs4').hide(); 
    } 
    if ($(".tws1").html().length < 58) { 
$('.tws1').hide(); 
    } 
    if ($(".tws2").html().length < 58) { 
$('.tws2').hide(); 
    } 
    if ($(".tws3").html().length < 58) { 
$('.tws3').hide(); 
    } 
    if ($(".tws4").html().length < 58) { 
$('.tws4').hide(); 
    }            
}); 
</script>

我的问题的第二部分是，假设我可以得到这个工作，是否有更有效的方法来编写这个脚本？

我敢肯定我做错了，因为我的jQuery技能不是很好。

来源

2013-08-27 tfer77

有什么目的'如果（$（）HTML（）。长度<58）'？你是否试图检查'<？php the_field（'facebook_url'）; ？>是空的？ –

检查仅包含锚图像的元素的html内容的长度是没有意义的。没有任何元素的html长度小于58个字符，因为您正在检查的是此字符串的长度：'<a href="https://www.facebook.com/whatever"><img src="/wp-content/images/fb-team.png"></a>'。

将唯一类名称分配给您的元素也是没有意义的 - 如果它们需要唯一使用ID。但我不认为他们必须是唯一的，因为如果你使用类“FBS”和“TWS”不带编号他们，你可以这样做：

$(".fbs,.tws").each(function() { 
    var $this = $(this); 
    if ($this.html().length < 58) // replace your if condition with something 
     $this.hide();    // that makes more sense (see my first paragraph) 
});

如果你真的需要编号班出于某种原因，只是用途：

$('[class^="fbs"],[class^="tws"]').each(...

来源

2013-08-27 13:57:52 nnnnnn

非常好，非常感谢！ – tfer77

请使用'$ this.find（“a”）这样的条件。ATTR（ “HREF”）== “”'。顺便说一下，''是'57'个字符。 –

如果你喜欢这款$（” FBS 1" ）。HTML（）长，你会得到答案‘92’，所以它是大于58

所以，你需要改变你的情况是这样的。

if ($(".fbs1").html().length > 58)

来源

2013-08-27 13:55:23

较短版本的代码

$("[class^=fbs],[class^=tws]").each(function() { 
    var $this = $(this); 
    if ($this.html().length < 58) 
     $this.hide(); 
});

来源

2013-08-27 13:59:28

这里是一个更通用的解决方案：

将“隐藏 - 如果太长”类添加到每个李。例如：

<li class="fbs1 hide-if-too-long">

和

<li class="tws1 hide-if-too-long">

然后，使用这个脚本：“FBS 1" 。

<script> 
    $(document).ready(function(){ 
     $('.hide-if-too-long').each(function() { 
      var el = $(this); 
      if (el.html().length < 58) { 
       el.hide(); 
      } 
     });           
    }); 
</script>

来源

2013-08-27 13:59:45 zigdawgydawg

jQuery的隐藏无法正常工作

回答

相关问题