jQuery [object Object] Проблема

Question

Я хочу обновить атрибут css с помощью jQuery, но он не работает. Использование предупреждений в коде ниже моего первого предупреждения вызывает

url("file:///H:/Web/example/HTML/images/red-arrow-up.png") 

но затем второе предупреждение (в если заявление) воспитывает

[object Object] 

Но что я хочу, чтобы это сделать, это обновление атрибут и измените их в URL. Любая идея, что я делаю неправильно?

$(document).ready(function() { 
     $(".portlet-header").click(function() { 
      var currValue = $(this).children(".portlet-arrow").css("background-image"); 
      alert (currValue) 
      if ($("currValue:contains('up')")) { 
       var newValue = $(currValue.replace("up", "down")); 
       alert(newValue) 
       $(this).children(".portlet-arrow").css("background-image", newValue)  
      }; 
      if ($("currValue:contains('down')")) { 
       var newValue = $(currValue.replace("down", "up")); 
       alert(newValue) 
       $(this).children(".portlet-arrow").css("background-image", newValue)  
      }; 
     }); 
    }); 

Answer 1

Это в основном все сводится к тому, переходя-топ на синтаксис селектора JQuery, не прочитав документацию, чтобы узнать, что селекторы на самом деле.

1. Почему вы окружите currValue.replace("down", "up") в $()? Это похоже на попытку создать объект jQuery из строки, содержащей URL-адрес изображения. Не делай этого. Произвольный код Javascript не должен быть окружен в $() без каких-либо причин.

2. Кроме того, $("currValue:contains('down')") не работает, что вы думаете. Этот синтаксис предназначен для выбора узлов DOM на основе определенных критериев, а не для реализации произвольных условных операторов в строках. You just want to search within a string.

$(document).ready(function() { 
    $(".portlet-header").click(function() { 
     var currValue = $(this).children(".portlet-arrow").css("background-image"); 
     alert(currValue); 
     if (currValue.indexOf('up') != -1) { 
      var newValue = currValue.replace("up", "down"); 
      alert(newValue); 
      $(this).children(".portlet-arrow").css("background-image", newValue); 
     } 
     if (currValue.indexOf('down') != -1) { 
      var newValue = currValue.replace("down", "up"); 
      alert(newValue); 
      $(this).children(".portlet-arrow").css("background-image", newValue); 
     } 
    }); 
}); 

Код может быть улучшена дополнительно:

$(function() { 
    $(".portlet-header").click(function() { 

     var currValue = $(this).children(".portlet-arrow").css("background-image"); 
     alert(currValue); 

     if (currValue.indexOf('up') != -1) { 
      var newValue = currValue.replace("up", "down"); 
     } 
     else if (currValue.indexOf('down') != -1) { 
      var newValue = currValue.replace("down", "up"); 
     } 
     else { 
      return; 
     } 

     alert(newValue); 
     $(this).children(".portlet-arrow").css("background-image", newValue); 
    }); 
}); 

Answer 2

оповещения показывает [объект Object], потому что вы создаете объект JQuery из строки с помощью:

$(currValue.replace("up", "down")); 

Вы должны использовать currValue.re место («вверх», «вниз»); без $().

Также

if ($("currValue:contains('up')")) { 

неверен. Это всегда возвращает true, потому что вы создаете пустой объект jQuery из строки, которую вы передали в $().

Вы должны использовать:

currValue.indexOf('up') !== -1 

или

/up/.test(currValue) 

, чтобы проверить, если строка содержит некоторую подстроку.