Question

<legend>SITE</legend>
<details id="SITE[comment]" name="SITE[comment]">
<summary>aide</summary>
<p>titre : nom de votre site affiché dans l'entête<br>
           couleur : de ce titre (format html ou css)<br>
           image : nom du dossier des images
</p></details><br>

<label for="SITE[titre]">titre</label>
<input id="SITE[titre]" name="SITE[titre]" value="Welcome" required="" size="25" type="text"><br>

<label for="SITE[couleur]">couleur</label>
<input id="SITE[couleur]" name="SITE[couleur]" class="color" value="#FFF" '="" type="text"><br>

<label for="SITE[images]">images</label>
<input id="SITE[images]" name="SITE[images]" value="img" required="" size="25" type="text">
<br>

在document.getElementsByClassName（）部分以某种方式＆＃34; j＆＃34;没有获得元素。 as you can see there。这是问题的html部分：

var index=1;
showPics(index);


function showPics(n) {
    var i;
    var j = document.getElementsByClassName("gpic");
    if (n > j.length) {index = 1;}
    if (n < 1) {
        index = x.length;
    }
    for (i = 0; i < j.length; i++) {
        x[i].style.display = "none";
    }
    j[index-1].style.display = "block";
}

function showNext(x) {
    showPics(index += x);
}

我不知道导致问题的原因。我只想尝试这样的事情：https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_slideshow_self

Answer 1

除了变量x需要j之外，您的代码似乎按预期工作。您还尝试在标记上设置属性position，这不符合您的意图。您需要设置style属性集<div style="position: relative">或CSS

div {
    position: relative;
}

此外，在您的代码中，没有关闭</div>标记。

var index = 1;
showPics(index);

function showPics(n) {
  var i;
  var j = document.getElementsByClassName("gpic");
  if (n > j.length) {
    index = 1;
  }
  if (n < 1) {
    index = j.length;
  }
  for (i = 0; i < j.length; i++) {
    j[i].style.display = "none";
  }
  j[index - 1].style.display = "block";
}

function showNext(x) {
  showPics(index += x);
}

img {
  margin: 0 auto
}

#leftbtn {
  position: absolute;
  top: 75px;
}

#rightbtn {
  position: absolute;
  right: 0;
  top: 75px;
}

<div>
  <button id=leftbtn onclick="showNext(-1);">Prevoius</button>
  <img class="gpic" src='http://via.placeholder.com/350x150'>
  <img class="gpic" src='http://via.placeholder.com/340x150'>
  <img class="gpic" src='http://via.placeholder.com/330x150'>
  <img class="gpic" src='http://via.placeholder.com/320x150'>
  <img class="gpic" src='http://via.placeholder.com/310x150'>
  <img class="gpic" src='http://via.placeholder.com/300x150'>
  <img class="gpic" src='http://via.placeholder.com/290x150'>
  <img class="gpic" src='http://via.placeholder.com/280x150'>
  <img class="gpic" src='http://via.placeholder.com/270x150'>
  <button id=rightbtn onclick="showNext(1);">Next</button>
</div>

Answer 2

你的javascript应该是这样的：

product_value = Product.find(params[:prod_id])
@product = ProductAttribute.where('prod_id = ?', product_value.value)

在代码的其余部分建议中，声明变量j而不是x时出现了问题。

Var没有从document.getElementsByClassName（）获取元素

2 个答案: