OnClick в цикле не стреляет

Question

Ниже приведен код из недавнего учебника журнала Computer Arts . То, что я пытался сделать, это реализовать функцию onClick в цикле, чтобы каждый div можно было нажимать и загружать соответствующую веб-страницу.

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

var itemsHTML = '',
        items = [
        {
          itemType:'ani',
          itemName:'Show Reel 10-11',
          path:'thumb_showreel.jpg',
          urlPath:'showreel.html'
        }];

И цикл, который берет информацию из массива (Обратите внимание на onClick - это мой ввод, все остальное из учебника:

    for(var i = 0; i < items.length; i++) {
      var type = items[i]['itemType'];
      var name = items[i]['itemName'];
      var path = items[i]['path'];
      var urlPath = items[i]['urlPath'];
      itemsHTML += "    <div class=\"element " + type + "\"  style=\"background-image:url('portfolio/" + type + "/" + path + "')\" onClick=\"document.location='http://www.thepapertorium.co.uk/'" + urlPath + "\">";
      itemsHTML += "      <div class=\"label\">";
      itemsHTML += "        <h1>" + name + "<\/h1>";
      itemsHTML += "      <\/div>";
      itemsHTML += "    <\/div>";
    }

Это то же самое onClick было взято из баннера моего заголовка. Там он работает правильно, поэтому я решил, что смогу вставить его сюда и, естественно, придерживаюсь синтаксиса, необходимого для цикла for, но мне не повезло. Пожалуйста, помогите с этой простой дилеммой!

Answer 1

Ваша проблема может быть в одном ' - она ​​должна идти до конца URL:

onClick=\"document.location='http://www.thepapertorium.co.uk/" + urlPath + "'\"

Answer 2

Проблема с кавычками - я упростил их для вас, поменяв местами "и"

Я тоже добавил; курсор: указатель и изменил document.location на window.location, так как это более правильно. На самом деле bfavaretto действительно правильно сказал, что вам не нужен javascript для изменения страницы - ссылка даже даст вам бесплатный указатель

DEMO

itemsHTML += '<div class="element ' + type + '" style="background-image:url(\'portfolio/' + type + '/' + path + '\')" onClick="window.location=\'http://www.thepapertorium.co.uk/' + urlPath + '\'">';

В следующий раз попробуйте jsfiddle.net и firebug

Answer 3

Я думаю, что ваша проблема document.location вместо window.location.Но я бы не стал использовать для этого javascript, вместо этого вы можете использовать тег привязки:

itemsHTML += "    <a class=\"element " + type + "\"  style=\"display: block; background-image:url('portfolio/" + type + "/" + path + "')\" href=\"http://www.thepapertorium.co.uk/" + urlPath + "\">";