h2 ile sarılmış olan bağlantıyı etkilemekten koruyun

Sadece jQuery'de tamamlanması gereken bir düğme testi üzerinde çalışıyorum. Site oldukça kafa karıştırıcı, ancak sanırım aşağıdaki sorunu basitleştirdim. Bu düğmeler için bazı stilleri uygulamaya çalışıyorum, ancak sınıf her yerde kullanılıyor ve bazı özel örneklerin dışlanması gerekiyor. Ben şu var Şuh2 ile sarılmış olan bağlantıyı etkilemekten koruyun

<body> 
    <div> 
     <a class="button primary" href="...">change me</a> 
    </div> 
    <div class="ancestorClass"> 
     <h2> 
      <a class="button primary" href="...">don't touch</a> 
     </h2> 
    </div> 
</body>

...

jQuery("<style type='text/css'> 
.change-button:before 
{font-family: HPFlex2Software3ResourceIcons; 
font-size: 18px; 
font-style: normal; 
content: \"\\e903\"; 
width: 10px; 
top: 5px; 
position: relative; 
display: block; 
float: left; 
color: #01a982; 
} 
.change-button-gray:before 
{ 
font-family: HPFlex2Software3ResourceIcons; 
font-size: 18px; 
font-style: normal; 
content: \"\\e903\"; 
width: 10px; 
top: 5px; 
position: relative; 
display: block; 
float: left; 
color: #707070; 
} 
</style>").appendTo("head"); 

    jQuery(".button.primary").addClass("change-button").css({ 
        "background-color": "transparent", 
        "color": "#000000", 
    }).mouseenter(function() { 
        $(this).removeClass("change-button"); 
        $(this).addClass("change-button-gray"); 
    }).mouseleave(function() { 
        $(this).removeClass("change-button-gray"); 
        $(this).addClass("change-button"); 
    });

In previous variations of tests on this site I was able to use the following to prevent specific buttons from being affected, but because of how the css is being added in on this variation it no longer works for me.

$('.button.primary').filter(function() { 
    return $(this).closest('.ancestorClass').length === 0;})

Here is the code I was using that got the error:

$('.button.primary').filter(function() { 
    var parent = $(this).parent().parent(); 
    return parent.hasClass(".ancestorClass"); 
.addClass("change-button").css({ 
       "background-color": "transparent", 
       "color": "#000000", 
}).mouseenter(function() { 
       $(this).removeClass("change-button"); 
       $(this).addClass("change-button-gray"); 
}).mouseleave(function() { 
       $(this).removeClass("change-button-gray"); 
       $(this).addClass("change-button"); 
})});

kaynak

2016-03-22 Carl Schoenleber

orada sorunu çözmek için pek çok yöntem var ama senin fikrin seçmek yerine gelen edecek yenisi ile. Bunun yerine bu kodu kullanarak:

$('.button.primary').filter(function() { 
return $(this).closest('.ancestorClass').length === 0;})

Bunu kullanmak öneririz:

$('.button.primary').filter(function() { 
     var parent = $(this).parent().parent(); 
     return parent.hasClass("ancestorClass"); 
    });

şöyle çalışır gösteren bir fiddle bu.

Başka bir çözüm de css seçiciyi :nth-child(number) kullanmaktır, ancak daha az güzeldir ve hedeften önceki öğeleri (aynı sınıfla) eklediğinizde veya sildiğinizde seçiciyi değiştirmeniz gerekir.

kaynak

2016-03-22 19:15:29 rsabir

Harika teşekkürler! Cehaletimden dolayı özür dilerim (jQuery için hala yeni yaşıyorum) ancak kodunuzu yukarıdaki büyük snippet'ime eklerken jeton hatalarını almaya devam ediyorum. Doğru sözdizimini anlamama yardımcı olabilir misiniz? –

Lütfen tarayıcınızın konsolundan aldığınız hatayı yapıştırın mı? – rsabir

Evet sorun değil: VM540: 8 Yakalanmamış SyntaxError: Beklenmeyen belirteç. Object.InjectedScript._evaluateAndWrap de Object.InjectedScript._evaluateOn de (140 : 878) Object.InjectedScript.evaluate de (: 34: 811) (: 667: 21) –

h2 ile sarılmış olan bağlantıyı etkilemekten koruyun

cevap

İlgili konular