У меня есть кнопка, которую я хочу менять при каждом нажатии. Он работает правильно, за исключением того факта, что он не меняется при первых 2 кликах. Что не так с моей логикой?

 var soc_selected = new Boolean(false);
    $('#soccer-button').click(function() {
          if (soc_selected == false) {
              $('#soccer-button').css('background', 'url(assets/img/sports/soccer_us.png)');
        soc_selected ^= true;
    }
    else if (soc_selected == true){
        $('#soccer-button').css('background', 'url(assets/img/sports/soccer.png)');
        soc_selected ^= true;
    }
    });
3
Reid Barber 15 Дек 2015 в 07:11

5 ответов

Лучший ответ

Зачем вам все эти странные манипуляции с XOR, которые на самом деле приводят к целому, а не к логическому значению?

Вы можете сделать это намного проще:

var soc_selected = false; // not Boolean(false)
$('#soccer-button').click(function() {
    var bg = soc_selected
        ? 'url(assets/img/sports/soccer_us.png)' 
        : 'url(assets/img/sports/soccer.png)';

    $('#soccer-button').css('background', bg);

    soc_selected = !soc_selected;  
});

На мой взгляд, теперь это выглядит намного прозрачнее и понятнее.

Еще один хороший вариант - определить стили в классах CSS и выполнить следующие действия:

$("#soccer-button").click(function() {
    $(this).toggleClass('us');
});

Это также решит проблему с необходимостью установить начальный фон.

Вот рабочая демонстрация JSFiddle.

2
Yeldar Kurmangaliyev 15 Дек 2015 в 04:28

Вы можете иметь некоторые проблемы с вашей логической логикой.

var soc_selected = new Boolean(false);

Эта строка фактически создает логическое значение object в отличие от простого примитива.

Поэтому, когда вы делаете сравнение строк здесь в первый раз. soc_selected name оценивается, а НЕ его значение, поэтому условие if действительно true == false в вашем коде.

      if (soc_selected == false) {
          $('#soccer-button').css('background', 'url(assets/img/sports/soccer_us.png)');
          soc_selected ^= true;
      }
1
TheLazyChap 15 Дек 2015 в 04:27
var soc_selected = new Boolean(false);
$(document).ready(function(){
    $('#soccer-button').click(function() {
      if (soc_selected == false) {
         $('#soccer-button').css('background', 'yellow');
		soc_selected ^= true;
	}
	else if (soc_selected == true){
			$('#soccer-button').css('background', 'red');
			soc_selected ^= true;
	}
  });
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<button id="soccer-button">click me</button>
0
Bijal 15 Дек 2015 в 05:02

Я думаю, что вы имели в виду soc_selected ^= false; в своем втором условии, если soc_selected == true.

Проверьте Fiddle

1
Nikolay Ermakov 15 Дек 2015 в 04:20
var soc_selected = new Boolean(false);
$('#soccer-button').click(function(){
  if (soc_selected == false) {
    $('#soccer-button').css('background', 'url(assets/img/sports/soccer_us.png)');
    soc_selected ^= true;
  }else if (soc_selected == true){
    $('#soccer-button').css('background', 'url(assets/img/sports/soccer.png)');
    soc_selected ^= false;
  }
});
1
D.zoe 15 Дек 2015 в 04:39