1

我的问题首先是双重的，如果我删除 .fbs 脚本，则以下代码涉及两个类.fbs和.tws，tws sript 可以工作，反之亦然，但它们不能一起工作。我在 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 技能不是很好。

4

4 回答 4

2

检查仅包含带有图像的锚点的元素的 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-27T13:57:52.617 回答
0

如果你喜欢这个 $(".fbs1").html().length 你会得到答案“92”所以它大于 58。

所以你需要像这样改变你的条件。

if ($(".fbs1").html().length > 58)
于 2013-08-27T13:55:23.230 回答
0

您的代码的较短版本

$("[class^=fbs],[class^=tws]").each(function() {
    var $this = $(this);
    if ($this.html().length < 58)
       $this.hide();
});
于 2013-08-27T13:59:28.993 回答
0

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

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

<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>
于 2013-08-27T13:59:45.803 回答