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的隱藏無法正常工作

回答

相關問題