jquery不是選擇器難度

編輯：好吧，只是爲了得到這個直線，你使用非選擇器來過濾特定標籤中的屬性，而不是過濾子元素？jquery不是選擇器難度

有人可以幫我解決這裏是否有某種語法錯誤，或者可能是我不理解這個概念？

我有列表項，當你點擊它們時，它們會改變正文的字體大小。現在列表項在主體內，所以它的字體變成。我希望UL保持相同的字體。所以我使用.not（「＃ulSize」），如下所示。但是這不起作用。

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $("#liSmall").click(function() { 
       $('body').not('#ulSize').removeClass('large normal').addClass('small'); 
      }); 
      $("#liNormal").click(function() { 
       $('body').not('#ulSize').removeClass('large small').addClass('normal'); 
      }); 
      $("#liLarge").click(function() { 
       $('body').not('#ulSize').removeClass('small normal').addClass('large'); 
      }); 
     }); 
    </script> 
    <style type="text/css"> 
     .large 
     { 
      font-size: large; 
     } 

     .normal 
     { 
      font-size: medium; 
     } 

     .small 
     { 
      font-size: small; 
     } 
    </style> 
</head> 
<body> 
    <ul id="ulSize"> 
     <li id="liSmall">Small Font</li> 
     <li id="liNormal">Normal Font</li> 
     <li id="liLarge">Large Font</li> 
    </ul> 
     Text in here!!! 
</body> 
</html>

謝謝你們

來源

2012-06-01 test

'。不是（ '#ulSize'）'只是刪除前一個匹配集合中的任何「＃ulSize」。而且，由於'body'不是'＃ulSize'，反正沒有任何反應。另外，'.not（）'不是一個選擇器。選擇符是'：not（）'，冒號。 – BoltClock

so $（'body：not（「＃ulSize」）'）...應該這樣做嗎？因爲我也嘗試過，我沒有積極的結果！ – test

無論如何你都不能刪除這樣的元素。 – Marcel

我建議重構你的JS的東西是這樣的：

$(function(){ 
    $('#liSmall, #liNormal, #liLarge').on('click', function(e){ 
    $('body').removeClass('small medium large'); 
    switch(this.id){ 
     case 'liSmall': $('body').addClass('small'); break; 
     case 'liMedium': $('body').addClass('medium'); break; 
     case 'liLarge': $('body').addClass('large'); break; 
    } 
    }); 
});

然後硬編碼的字體大小的#ulSize名單上，並讓瀏覽器做休息。

#ulSize { 
    font-size: 16px !important; 
}

來源

2012-06-01 17:36:51 loganfsmyth

非常好的重構。 +1 –

好的，但是這改變了被點擊的LI上的字體大小，而不是所有的但是ul/li元素，所以它看起來倒退了。 –

@MarkSchultheiss你說得很對，我誤解了他想做的事情。我不知道爲什麼我的答案被接受，這是錯誤的：我現在已經修復了它。 – loganfsmyth

試一下：

<script type="text/javascript"> 
    $(document).ready(function() { 
     var $DefaultULSize = $('#ulSize').css('font-size'); 

     $("#liSmall").click(function() { 
      $('body').removeClass('small normal large').addClass('small'); 
      $('#ulSize').css('font-size', $DefaultULSize); 
     }); 
     $("#liNormal").click(function() { 
      $('body').removeClass('small normal large').addClass('normal'); 
      $('#ulSize').css('font-size', $DefaultULSize); 
     }); 
     $("#liLarge").click(function() { 
      $('body').removeClass('small normal large').addClass('large'); 
      $('#ulSize').css('font-size', $DefaultULSize); 
     }); 
    }); 
</script>

來源

2012-06-01 17:33:52

是的這是完美的工作謝謝，但說實話我檢查了一些jquery教程，我希望得到相同的結果，具體使用不是:) – test

從你的JavaScript擺脫.not('#ulSize')，並添加#ulSize { font-size: medium !important; }你的CSS。不要像其他人推薦的那樣不必要地膨脹你的JS，這是毫無意義的。

來源

2012-06-01 17:34:37 Marcel

嘗試此，Live Demo

$('body').children().not('#ulSize').removeClass('large normal').addClass('small');

來源

2012-06-01 17:35:34 Adil

沒有工作：/ – test

我認爲這是你問的http ：//jsfiddle.net/qwSt2/3/ – Adil

selection.not（過濾器）將返回匹配的一組過濾器，所述選擇中的元素。

你在這裏做的是過濾沒有「ulSize」id的「body」標籤，所以你的.not（）過濾器是無用的。

來源

2012-06-01 17:35:55

這應該工作：

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $("#liSmall").click(function() { 
       $('body').removeClass('large normal').addClass('small'); 
      }); 
      $("#liNormal").click(function() { 
       $('body').removeClass('large small').addClass('normal'); 
      }); 
      $("#liLarge").click(function() { 
       $('body').removeClass('small normal').addClass('large'); 
      }); 
     }); 
    </script> 
    <style type="text/css"> 
     .large 
     { 
      font-size: large; 
     } 

     .normal 
     { 
      font-size: medium; 
     } 

     .small 
     { 
      font-size: small; 
     } 
     #ulSize 
     { 
     font-size: 16px !important; 
     } 
    </style> 
</head> 
<body> 
    <ul id="ulSize"> 
     <li id="liSmall">Small Font</li> 
     <li id="liNormal">Normal Font</li> 
     <li id="liLarge">Large Font</li> 
    </ul> 
     Text in here!!! 
</body> 
</html>

工作小提琴http://jsfiddle.net/cYa9q/

來源

2012-06-01 17:38:11

不會改變LI字體 –

如果你想提高網頁的字體大小，你爲什麼要這麼做每個元素？

在body-tag（或HTML-tag）上添加/刪除一個類並相應地設置你的CSS更方便。

來源

2012-06-01 17:53:53

這個怎麼樣。更簡單的Jquery編碼和使用NOT選擇器？

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#ulSize > li').click(function(event){ 
     $('body').children(':not(#ulSize > li)').removeClass('small normal large').addClass($(this).attr('id').substr(2).toLowerCase()); 
    }); 
</script>

來源

2012-06-01 18:23:24 Ateszki

好的，你正在做一個教程，所以你想要詳細的jQuery，我明白了。

出於同樣的原因，您還需要執行.not()語法。我明白了。

我修飾了這個例子，所以用邊框顯示什麼沒有改變。

所以，這確實是：

var noto = $('#ulSize, #ulSize > li'); // stuff to NOT select/change 
noto.css('border', 'solid lime 1px');// stuff that should not change 
noto.addClass('normal');// avoid inheriting from the body. 

var selecter = $('body').not(noto); // stuff TO change but NOT the noto stuff above. 
selecter.css('border', 'solid red 1px');// border around stuff that should change. 
// verbose click events for the demo 
$("#liSmall").click(function() { 
    selecter.removeClass('large normal').addClass('small'); 
}); 
$("#liNormal").click(function() { 
    selecter.removeClass('large small').addClass('normal'); 
}); 
$("#liLarge").click(function() { 
    selecter.removeClass('small normal').addClass('large'); 
});

爲了好玩，給每個李它們設置類：

<body> 
    <ul id="ulSize"> 
     <li id="liSmall" class='small'>Small Font</li> 
     <li id="liNormal" class='normal'>Normal Font</li> 
     <li id="liLarge" class='large' >Large Font</li> 
    </ul> 
    <div id='myclass'> 
    Text in here!!! 
    </div> 
Text in the body 
</body>

然後使用它：

var noto = $('#ulSize, #ulSize > li'); 
var selecter = $('body').not(noto); 
$('#liSmall, #liNormal, #liLarge').click(function(e) { 
    selecter.removeClass('small normal large').addClass($(this).attr('class')); 
});

來源

2012-06-01 20:24:58

謝謝你這樣詳細的回答！我從中學到了很多！ – test

愚蠢的我，CSS繼承需要：'noto.addClass（'normal'）;' 所以我補充說。如果沒有這個，身體中的元素會繼承身體的CSS。如果您不包含該內容，則同樣的問題適用於ul元素中的文本。 –

jquery不是選擇器難度

回答

相關問題