Verhindern, dass der in h2 eingepackte Link von der Klasse

betroffen ist Ich arbeite an einem Button-Test, der nur in jQuery abgeschlossen werden muss. Die Seite ist ziemlich verwirrend, aber ich denke, ich habe das Problem unten vereinfacht. Ich versuche, einige Stile auf diese Schaltflächen anzuwenden, aber die Klasse wird überall verwendet und einige spezifische Instanzen müssen ausgeschlossen werden.Verhindern, dass der in h2 eingepackte Link von der Klasse

<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>

Zur Zeit habe ich die folgende ...

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"); 
})});

Quelle

2016-03-22 Carl Schoenleber

gibt es viele Möglichkeiten, um Ihr Problem zu lösen, aber ich werde Ihre Idee wählen statt kommenden mit einem neuen. Statt diesen Code verwenden:

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

Ich schlage vor, Sie dies zu nutzen:

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

hier ein fiddle ist die zeigen, wie es funktioniert.

Eine andere Lösung wäre, den css-Selektor :nth-child(number) zu verwenden, aber es ist weniger schön und Sie müssen den Selektor ändern, wenn Sie Elemente hinzufügen oder löschen, die dem Ziel vorausgehen (mit derselben Klasse).

Quelle

2016-03-22 19:15:29 rsabir

vielen dank! Ich entschuldige mich für meine Unwissenheit (ich bin noch neu bei jQuery), aber wenn ich meinen Code zu meinem größeren Ausschnitt hinzufüge, bekomme ich immer Token-Fehler. Können Sie mir helfen, die korrekte Syntax zu verstehen? –

Können Sie bitte den Fehler kopieren, den Sie von der Konsole Ihres Browsers erhalten? – rsabir

Ja kein Problem, das zurückgegeben wird: VM540: 8 Uncaught SyntaxError: Unerwartetes Token. bei Object.InjectedScript._evaluateOn (: 878: 140) bei Object.InjectedScript._evaluateAndWrap (: 811: 34) bei Object.InjectedScript.evaluate (: 667: 21) –

Verhindern, dass der in h2 eingepackte Link von der Klasse

Antwort

Verwandte Themen