2014-01-31 2 views
0

Я должен упустить что-то действительно простое здесь. Все, что я хочу сделать, это сделать цвет всех элементов списка с помощью класса «link» для переключения между синим и черным. Я прочитал полдюжины сообщений и еще не понял ответа.jQuery: if else .click не работает

jfiddle:http://jsfiddle.net/Y8K2x/1/

HTML:

<button>Toggle Link Color</button> 
<ul> 
    <li class="item">Item 1</li> 
    <li class="link">Link 2</li> 
    <li class="item">Item 3</li> 
    <li class="link">Link 4</li> 
    <li class="link">Link 5</li> 
    <li class="item">Item 6</li> 
    <li class="link">Link 7</li> 
    <li class="item">Item 8</li> 
</ul> 

Вот JS:

$('button').click(function() { 
var linkColor = $('.link').css('color'); 
if (linkColor == '#0099ff') { 
    $('.link').css('color', '#000000'); 
} else if (linkColor == '#000000') { 
    $('.link').css('color', '#0099ff'); 
} 

});

ответ

1

Не было бы проще (или уборщик) просто использовать:

JQuery

$('button').click(function() { 
    $('.link').toggleClass('link, link1'); 
}); 

CSS

.link { 
    color: #000000; 
} 
.link1 { 
    color: #0099ff; 
} 

jsFiddle example

(BTW, JQuery возвращает значения RGB для цвета, а не гекс)

+0

+1, и с веб-сайта Jquery " Различные браузеры могут возвращать значения цвета CSS, которые логически, но не текстовые, например, #FFF, #ffffff и rgb (255,255,255). " – lovetostrike

+0

Downvoter помочь объяснить? – j08691

1

Простой console.log из linkColor покажет, что цвет находится в формате rgb, а не в гексагоне.

$('button').click(function() { 

var linkColor = $('.link').css('color'); 

if (linkColor == 'rgb(0, 153, 255)') { 

    $('.link').css('color', '#000000'); 

} else if (linkColor == 'rgb(0, 0, 0') { 

    $('.link').css('color', '#0099ff'); 

} 

}); 
0

Пожалуйста, попробуйте код возможно может помочь

$('button').click(function() { 
    var that = $(this); 

    if(that.hasClass('blue')) {   
     $('.link').css('color', '#000000'); 
     $('button').removeClass('blue');  
    } else { 
     $('.link').css('color', '#0099ff'); 
     that.addClass('blue'); 

    } 

}); 

Демо: http://jsfiddle.net/vsok/3qSkr/1/