У меня есть некоторые проблемы с методом jquery css

#javascript #css

Вопрос:

Я хочу изменить цвет кнопки при нажатии с помощью этого кода

 $('.vote').click(function(){
  var self = $(this);
  var type = $(this).data("type");
  var action = $(this).data("action");
  var parent = self.parent();
  if(!(status == '1')){
    if(type == '1'){
      self.css("color","orange");
    }
    else if(type == '2'){
      self.css("color":"red"});
    }
  }
});

И это не работает. Но когда я пытаюсь поместить эту строку self.css("color","orange"); за пределы оператора IF, она работает :

 $('.vote').click(function(){
  var self = $(this);
  var type = $(this).data("type");
  var action = $(this).data("action");
  var parent = self.parent();
  self.css("color","orange");
  if(!(status == '1')){
    if(type == '1'){
      //if statement here
    }
    else if(type == '2'){
      //if statement here
    }
  }
});

Проблема в том, что это не то, что я хочу, чтобы произошло. Как я могу это сделать, используя первый приведенный выше код.

1. Я предполагаю, что либо статус равен единице, либо тип не равен 1.

2. Похоже, что ваша проблема связана не с методом jQuery css, но ваша условная логика (операторы if) гарантирует, что «тип» и «статус» соответствуют вашим ожиданиям

3. это моя вина… Я не заметил, что изменил тип с 1 и 2 на ‘up’ и ‘down’. Так что спасибо, что указали на это

Ответ №1:

Проблема, похоже, в следующей строке :

 self.css("color":"red"});

Вы пропустили, чтобы открыть скобку { здесь :

 self.css({"color":"red"});
_________^

Или просто используйте запятую , , как вы делаете в первом примере :

 self.css("color","red");

Надеюсь, это поможет.

  var status = '2';

$('.vote').click(function(){
  var self = $(this);
  var type = $(this).data("type");
  var action = $(this).data("action");
  var parent = self.parent();

  if(!(status == '1')){
    if(type == '1'){
      self.css("color","orange");
    }
    else if(type == '2'){
      self.css({"color":"red"});
    }
  }
});

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button class='vote' data-type='1'>Vote type 1</button>
<button class='vote' data-type='2'>Vote type 2</button>