Простой jQuery, работающий на Chrome, а не на Firefox и других браузерах - PullRequest
Новая
       7

Простой jQuery, работающий на Chrome, а не на Firefox и других браузерах

1 голос
/ 14 октября 2011

Я написал эти простые строки, чтобы показать .elemproduct div, только если у него есть набор фоновых изображений.

Я разработал в Chrome и только что понял, что этот код работает только в браузерах Webkit.При сбое он выдает каждый .elemproduct, как если бы оператор if не был распознан. 

function hideBox() {
  var $bg = $('.elemproduct');

  $bg.each(function() { 
     if ($(this).css("background-image") === "url(####)") {   
        return true; 
     }
     else {
        $(this).show();
     }
  });

  return true;
};

Есть идеи?

1 Ответ

3 голосов
/ 14 октября 2011

Я бы предположил, что это может быть из-за того, что background-image никогда не будет точно равен (===) пути (предположительно) директории изображений http://www.infiniscale.com/beta/.

Если вы хотите просто спрятать эти .elemproduct элементы без background-image, вам будет немного проще использовать: 

function hideBox() {
    var $eP = $('.elemproduct');
    $eP.each(

    function() {
        if (!$(this).css('background-image') || $(this).css('background-image') == 'none') {
            $(this).hide();
        }
    });
}

hideBox();

Демонстрация JS Fiddle .

<ч />

Отредактировано , чтобы компенсировать проблему, связанную с тем, что пустое url() в свойстве background (или background-image) заполнено URL-адресом текущей страницы. Это делает довольно громоздким оператор if, но, по крайней мере, он работает надежно (насколько я могу судить в настоящее время), что является улучшением вышеописанного. Последняя итерация: 

function hideBox() {
    var href = document.location;
    var $eP = $('.elemproduct');
    $eP.each(

        function() {
        var imgString = $(this).css('background-image');
        var srcString = imgString.replace('url(','').replace(')','');
            if (!imgString || imgString == 'none' || srcString == href) {
                $(this).hide();
            }
        });
}
hideBox();

JS Fiddle demo .

<ч /> Отредактировано и исправлено выше, чтобы удалить ненужную переменную (srcString) и ее множественные вызовы .replcace(): 

function hideBox() {
    var href = document.location;
    var $eP = $('.elemproduct');
    $eP.each(

        function() {
        var imgString = $(this).css('background-image');
            if (!imgString || imgString == 'none' || imgString.indexOf(href) > -1) {
                $(this).hide();
            }
        });
}
hideBox();

JS Fiddle demo .

<ч /> Отредактировано в ответ на комментарий от OP:

Я пытаюсь заставить его работать, но в chrome все отображается, IE все скрыто. Даже если я увижу, что твой код работает под jsfiddle ... я не все понимаю, т. Е. imgString.indexOf(href) > -1.

if тесты для трех условий:

  1. !imgString, если строка не возвращена из свойства background-image метода .css().
  2. imgString == 'none', потому что jQuery (иногда или, возможно, всегда) возвращает 'none', если не определено background-image.

  3. imgString.indexOf(href) > -1. Это смотрит на переменную imgString, чтобы увидеть, содержит ли она строку, содержащуюся в переменной href. Если строка найдена, она возвращает позицию, в которой она была найдена; если он не был найден, он возвращает -1. 

    var string = "abcdef";
alert(string.indexOf('a')); // alerts: 0

Демонстрация JS Fiddle . 

    alert(string.indexOf('bc')); // alerts: 1

JS Fiddle demo . 

    alert(string.indexOf('ef')); // alerts: 4

Демонстрация JS Fiddle . 

    alert(string.indexOf('x')); // alerts: -1

JS Fiddle demo .

Это нужно для проверки того, что пустой url() в CSS не просто автоматически заполняется браузером.

<ч />

Отредактировано после того, как я указал на URL-адрес страницы и обнаружил, что использование PHP и GET сделало вещи немного более неловкими, чем я себе представлял.

Использование следующего в консоли (конечно, в Chromium) сработало: 

$('.elemproduct').each(
    function() {
        if ($(this).css('background-image') == 'url(' + document.location.toString().substring(0, document.location.href.toString().indexOf('index')) + ')') {
            $(this).hide();
        }
    });

Вышеописанное работает в JS Fiddle и реализовано в функции hideBox(): 

// in real life use:
// var urlString = document.location.href;
var urlString = 'http://www.infiniscale.com/beta/index.php?id=48';


function hideBox() {
    var href = document.location;
    var $eP = $('.elemproduct');
    $eP.each(
        function(){
            if ($(this).css('background-image') == 'url(' + urlString.substring(0,urlString.indexOf('index')) + ')'){
                $(this).hide();
            }
        });
}
hideBox();

Демонстрация вышеупомянутого доступна в JS Fiddle !

...