Класс изменения идентификатора в зависимости от URL - обмен изображениями на основе URL - - PullRequest
Новая
       12

Класс изменения идентификатора в зависимости от URL - обмен изображениями на основе URL -

1 голос
/ 10 мая 2011

Чего я пытаюсь достичь: На основе URL (т. Е. Foo.com/item1) элемент div "logoswap" получает другой класс.

Следующееэто код, который я собрал, но он кажется совершенно неверным.Я ни в коем случае не профессионал JS, XHTML / CSS больше моя скорость (немного PHP) ... Я не могу использовать PHP, даже если это возможно в PHP (и я знаю, что это потому, что у меня есть версия PHPто, что мне нужно, уже сделано, но я не могу правильно назвать PHP.

Я просто пытаюсь получить другой логотип для отображения на основе каталога / url ... Он не имеетчтобы быть фоновым элементом, вызываемым CSS-классом, мне просто нужно другое изображение для загрузки, основанное на вышеупомянутой переменной url ... 

  $(function() {
  var url = location.pathname;

  if(url.indexOf('item1') > -1) {
    document.getElementById("logoswap").className += " class1";
   }

  elseif(url.indexOf('item2') > -1) {
    document.getElementById("logoswap").className += "class2";
   }

  elseif(url.indexOf('item3') > -1) {
    document.getElementById("logoswap").className += "class3";
   }

  elseif(url.indexOf('item4') > -1) {
    document.getElementById("logoswap").className += "class4";
   }

  elseif(url.indexOf('item5') > -1) {
    document.getElementById("logoswap").className += "class5";
   }

  else {
    document.getElementById("logoswap").className += "class1";
   }

  });

Это то, что у меня есть ... Ужасно яконечно.

Вот почему я здесь, но мне определенно нужна помощь.

Ответы [ 3 ]

2 голосов
/ 10 мая 2011

Назначение класса CSS по URL-пути

A jsfiddle настроен для это решение.

Вот пример использования числовых выражений, если они доступны. Это не относится к вышеуказанному вопросу. 

$(function() {
  var rgx = /item(\d+)$/,
      url = location.pathname,
      id = (rgx.test(url)) ? url.match(rgx)[1] : '1';
  $("#logoswap").addClass("class" + id);
});

UPDATE:

В свете новых подробностей вам может понадобиться массив значений, которые должны быть получены из имен классов, которые вы намереваетесь использовать, или в точности соответствовать им. 

$(function(){
  // my favorite way to make string arrays.
  var matches = "brand1 brand2 brand3".split(" "),
      url = location.pathname.match(/\w+$/)[0], // get the last item
      id = matches.indexOf(url),
      className = matches[(id > -1) ? id : 0];
  $("#logoswap").addClass(className);
});

Чтобы сделать эту работу, вам понадобится несколько вещей на месте. Я предполагаю, что пути будут заканчиваться числом, как мы обрисовали здесь. Значение по умолчанию заканчивается на 1. Вам нужно, чтобы изображения были доступны. Вам нужно определить стили для каждой возможности.

Настройка CSS 

#logoswap {
  height : 200px;
  width : 200px;
}
.class1 {
  background-image : url(/path/to/default.jpg);
}
.class2 {
  background-image : url(/path/to/second.jpg);
}
.brand1 {
  background-image : url(/path/to/brand/1/logo.jpg);
}
...

без jQuery

если в вашем коде нет jQuery, вам может понадобиться window.onload. 

(function(){
  var old = window.onload;
  window.onload = function(){
    old();
    var r = /item(\d+)$/,
        url = location.pathname,
        id = (r.test(url)) ? url.match(r)[1] : '1';
    document.getElementById('logoswap').className += "class" + id;
  };
})()

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

0 голосов
/ 10 мая 2011

Используя только HTML / CSS, вы можете добавить (или добавить через javascript) id к body страницы: 

<body id="item1">

Затем в вашем CSS создайте селектор: 

#item1 #logoswap {
    // class1 CSS
}
0 голосов
/ 10 мая 2011

Нет ничего плохого в том, что у тебя есть.Вы можете привести в порядок что-то вроде ниже. 

$(function() {
    var url = location.pathname;
    var logo = document.getElementById("logoswap");
    var i = 6;

    logo.className = "class1";

    while(i--)
    {
        if(url.indexOf("item" + i) > -1) {
            logo.className = "class" + i;
        }
    }
});

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...