Problem ze zmianą koloru bordera w jQuery

Question

Cześć wszystkim!

Mam dwa pytanka :)

Mianowicie chce zmienić kolor dolnego borderu na kliknięcie w przycisk, jeśli w opcji select jest wybrany miesiąc. Wszystko ładnie działa, ale po drugim kliknięciu kolor zmienia się na zielony. Wiecie dlaczego?

Druga sprawa co mogę zrobić żeby przy każdym wyborze opcji resetowało mi border? Bo np wybieram styczeń zatwierdzam i podkreśla się na zielono a jak później wybiorę np luty to już mam podkreślone bez kliknięcia w przycisk.

Poniżej kod w jQuery:

check - przycisk

current - wybrana opcja

nice-select - zbiór opcji

$('.check').on('click', function(){
    var month = $('.current');
    if(month.text() !== 'Miesiąc'){
      $('.nice-select').css('border-bottom','3px solid green');
    }else{
      $('.nice-select').css('border-bottom','3px solid red','!important');
      var error = $('<p>Wybierz miesiąc</p>');
      error.css('color','red').css('font-weight','bold').appendTo(month);
    }
})

Z góry dziękuje za pomoc :)

Answer 1

Z tego co widze w dokumentacji jQuery to metoda css może posiadać maksymalnie 2 parametry.

Dodatkowo:

Note: .css() ignores !important declarations. So, the statement $( "p" ).css( "color", "red !important" ) does not turn the color of all paragraphs in the page to red. It's strongly advised to use classes instead; otherwise use a jQuery plugin.

Stwórz nową klasę w CSS i po prostu ją dodawaj lub usuwaj.

Comments

Usunąłem important, ale i tak nie działa jak powinno. W css też próbowałem dodać klasę. Znaczy przy pierwszym kliknięciu działa elegancko bo podświetla na czerwono jeśli nie wybiorę miesiąca, ale jak kliknę drugi raz to zmienia kolor na zielony

---

No bo dodajesz p (z tekstem) do .current (gdy text === 'Miesiąc'), wtedy month.text() zwraca Ci: MiesiącWybierz miesiąc

---

Rzeczywiście jak usunąłem p to działa poprawnie tylko problem w tym, że muszę tam dodać ten tekst :P

---

Dodaj go za lub przed tym elementem.

---

Działa! Dzięki :)