JavaScript вставляется по-разному в URL, а затем использовать его, если перезагрузить

Question

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

У нас есть «View More» под каждым альбомом, щелчок по которому показывает список песен (используя jquery, скрытый div скользит вниз).Мы хотели бы добавить переменную к URL-адресу, если кто-то щелкает по нему (или удаляет его, если они «скрывают») песни, чтобы создать постоянную ссылку на этот раздел.Если кто-то пройдет, это автоматически покажет, что div открыт.

Таким образом, ссылка должна выглядеть примерно так http://www.greendayauthority.com/music/catalog.php#album=1039 или http://www.greendayauthority.com/music.catalog.php?album=1039

(Может кто-нибудь помочь мне найти лучший способ использовать это? Между "#" и«?»

Мы хотим сделать то же самое для текстов отдельных песен. Если кто-то нажимает на название песни, он добавляет еще одну переменную в URL с идентификатором песни.

Так что если кто-тощелкает название песни, тогда это будет http://www.greendayauthority.com/music/catalog.php?album=1039&song=3

Мы можем обработать весь код, чтобы все содержимое появилось на странице, но я не знаю, как добавить переменную на страницу с помощью JavaScript, так что если кто-то хочет связать текст песни с определенной песней, он может поделиться этой ссылкой, и при посещении будут показаны правильные элементы div.

Может ли кто-нибудь помочь мне указать верное направление? Любые советына лучший способ сделать это также приветствуются.

Спасибо!

Answer 1

Если вы разделяете его символом?, Это строка запроса, нормальный способ размещения переменных на странице.Если вы делаете это с #, это хеш, и это относится к навигации по странице.

Если вы используете #, вы можете перемещаться без обновления страницы.Если вы добавите элемент в строку запроса из Javascript (location.href = blah? Album = 1039), страница будет перезагружена.Я не думаю, что это то, что вы хотите.

В любом случае, когда вы нажимаете ссылку, чтобы открыть скрытый div, не меняйте location.href.Просто сделайте ваш тег привязки перемещаться по странице, как в <a href="#album1039"></a>

Answer 2

Вот моя попытка:

Обязательный код:

var HashSearch = new function () {
   var params;

   this.set = function (key, value) {
      params[key] = value;
      this.push();
   };

   this.get = function (key, value) {
       return params[key];
   };

   this.keyExists = function (key) {
       return params.hasOwnProperty(key);
   };

   this.push= function () {
       var hashBuilder = [], key, value;

       for(key in params) if (params.hasOwnProperty(key)) {
           key = encodeURIComponent(key), value = encodeURIComponent(params[key]);
           hashBuilder.push(key + ( (value !== "undefined") ? '=' + value : "" ));
       }

       window.location.hash = hashBuilder.join("&");
   };

   (this.load = function (paramString) {
       params = {}
       var hashStr = paramString || window.location.hash, hashArray, keyVal
       hashStr = hashStr.substring(1);

       if (hashStr === "") return;

       hashArray = hashStr.split('&');

       for(var i = 0; i < hashArray.length; i++) {
           keyVal = hashArray[i].split('=');
           params[decodeURIComponent(keyVal[0])] = (typeof keyVal[1] != "undefined") ? decodeURIComponent(keyVal[1]) : keyVal[1];
       }
   })();
};

Код инициализации:

$(function () {
    showDiv();

    $(".view-more-hash").live('click', function () {
       HashSearch.load(this.hash);
       showDiv();
    });
});

function showDiv() {
    if (HashSearch.keyExists('album')) {
        var albumDiv = $("#album" + HashSearch.get('album')).show();

        if (HashSearch.keyExists('song')) {
           albumDiv.find("#album" + HashSearch.get('album') + "song" + HashSearch.get('song')).show()
        }
    }
}

Ваши ссылки будут выглядеть так:

<a href="#album=2">View album</a>
<a href="#album=2&song=3">View song</a>

Ваш контент:

<a name="album=2"></a> // auto scroll to location.. not required
<div id="album2">
   <div id="album2song3"></div>
</div>