Question

我的问题首先是双重问题，下面的代码涉及两个类 .fbs 和 .tws 如果我删除tws sript的.fbs脚本，反之亦然但他们不能一起工作。我在wordpress循环中工作，我的html / php看起来像这样：（显然更多，但这是问题的一部分）

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技能不是很好。

Answer 1

检查仅包含图像锚点的元素的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(...

Answer 2

如果你喜欢这个$（“。fbs1”）。html（）。长度你会得到答案“92”所以它大于58。

所以你需要像这样改变你的状况。

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

Answer 3

代码的缩短版

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

Answer 4

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

为每个li添加“hide-if-too-long”类。例如：

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

和

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

然后，请改用此脚本：

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

jQuery隐藏不正常

4 个答案: