Как я могу скрыть элемент, используя jQuery, основываясь на значении его поля слева в CSS?

Question

Я разрабатываю слайдер в стиле карусели и хочу скрыть один из элементов управления, когда левый край ul равен -3480px. Вот мой код:

$(function(){
    if($("ul#listName").css("margin-left") == "-3480px"){
      $(".nextButton").hide();
    }    
});

Хотя он ничего не делает, и я не уверен, что делать дальше. У кого-нибудь есть указания или предложения?

Answer 1

У меня нет вашего полного сценария для игры, но я бы порекомендовал сделать console.log() на $("ul#listName").css("margin-left"), чтобы увидеть, действительно ли это выдает то, что вы думаете. Я бы также использовал <=, если вы не указали это точное значение. </p>

Я просто отрабатываю здесь предположения, но, надеюсь, это поможет.

Answer 2

В зависимости от того, какое свойство стиля вы анимируете, вы должны это проверить. Также убедитесь, что перед сравнением конвертируйте значение в int, потому что метод css() также даст единицу измерения (px / em ..) вместе со значением.

    if(parseInt($("ul#listName").css("margin-left"), 10) == -3480){
        $(".nextButton").hide();
    }    

Если вы выполняете этот код при любом обратном вызове анимации, я бы посоветовал вам проверить <= вместо ==, потому что значение может быть не таким идеальным во время анимации. Попробуйте это.

    if(parseInt($("ul#listName").css("margin-left"), 10) <= -3480){
        $(".nextButton").hide();
    }  

Answer 3

var leftMargin = parseInt($('ul#listName').css('margin-left'), 10);
if (leftMargin == -3480){
  $('.nextButton').hide();
}

Я использовал parseInt, чтобы показать альтернативу и избежать любых зависаний, которые могут возникнуть, если / когда добавлено px.

Answer 4

var p = $(".your_class");
var position = p.position();
  if(p.position().left == '-3480px'){
$(".nextButton").hide();
}

Answer 5

var mm = $("ul#listName").css("margin-left");
if(mm == -3480+"px"){
  $(".nextButton").hide();
}