用按钮递增随机数？

提问者：小点点

用按钮递增随机数？

我是一个编码新手，我遇到了以下问题:我创建了一个随机数，我把它放在一个有类的p标记中，然后我试图通过单击一个按钮来增加这个数字。这是我到目前为止的代码:

$(document).ready(function(){

let films = JSON.parse(movies);

for (let i = 0; i < films.length; i++){

    let movie = `
    <div class="container">
        <div class="poster">
            <img class="pic" src="${films[i].image}">
        </div>
        <div class="text-box">
            <div class="details">
                <h2>${films[i].title}</h2>
                <p>${films[i].releaseDate}</p>
                <p>Genre: ${films[i].genre}</p>
                <p>Director: ${films[i].director}</p>
            </div>
            <div class="like-box">
                <input type="button" class="btn" value="Like &#128077;" number="${i}"></input>
                <p class="counter"></p>
            </div>
        </div>
    </div>  
    `;
    $("#main2").append(movie);
    $(".counter").text(Math.floor((Math.random()*100) + 1));
}

    $(".btn").click(function() {
        let el = parseInt($(".counter").text());
        $(".counter").text(el+1);
    })

}）；

问题是，如果我点击按钮，而不是得到例如:19，那么点击20之后，我得到的是191919191920。所以基本上按钮是可以工作的，但并不完全是我想要的工作方式。谁能帮帮我吗？

共3个答案

匿名用户

for (let i = 0; i < films.length; i++){

完成这个for循环后，dom中将有films.length元素，类为counter。这个$（“。counter”）.text()将返回的是元素中所有文本与类counter的连接。这就是你得到191919191920的原因。

匿名用户

您需要做的更改:

向容器添加新类，增加行计数。这是必需的，以确定您正在观看的电影，并增加喜欢值。

<div class='container row-" +i+ "'">

然后将onClick事件添加到like按钮以传递您所在的行。这是为了识别增加哪个计数器的值。

<input type="button" class="btn" value="Like &#128077;" number="1" onclick="incrementLikes('row-" +i+ "')"></input>

null

$(document).ready(function() {
  $(".counter").text(Math.floor((Math.random() * 100) + 1));
});

function incrementLikes(rowId) {
  let mainRow = document.getElementsByClassName(rowId)[0];
  let counter = parseInt(mainRow.getElementsByClassName('counter')[0].innerHTML);
  mainRow.getElementsByClassName('counter')[0].innerHTML = counter + 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container row-1">
  <div class="poster">
    <img class="pic" src="">
  </div>
  <div class="text-box">
    <div class="details">
      <h2>Film Title 1</h2>
      <p>13/06/2020</p>
      <p>Genre: Action</p>
      <p>Director: John Doe</p>
    </div>
    <div class="like-box">
      <input type="button" class="btn" value="Like &#128077;" number="1" onclick="incrementLikes('row-1')"></input>
      <p class="counter"></p>
    </div>
  </div>
</div>
<div class="container row-2">
  <div class="poster">
    <img class="pic" src="">
  </div>
  <div class="text-box">
    <div class="details">
      <h2>Film Title 2</h2>
      <p>13/06/2020</p>
      <p>Genre: Action</p>
      <p>Director: John Doe</p>
    </div>
    <div class="like-box">
      <input type="button" class="btn" value="Like &#128077;" number="1" onclick="incrementLikes('row-2')"></input>
      <p class="counter"></p>
    </div>
  </div>
</div>
<div class="container row-3">
  <div class="poster">
    <img class="pic" src="">
  </div>
  <div class="text-box">
    <div class="details">
      <h2>Film Title 3</h2>
      <p>13/06/2020</p>
      <p>Genre: Action</p>
      <p>Director: John Doe</p>
    </div>
    <div class="like-box">
      <input type="button" class="btn" value="Like &#128077;" number="1" onclick="incrementLikes('row-3')"></input>
      <p class="counter"></p>
    </div>
  </div>
</div>

匿名用户

问题是选择器“。counter”

$（“。counter”）。text返回具有类“。counter”的所有元素的组合字符串值

我已经使用特定于单击按钮的选择器修改了您的代码

let films = JSON.parse(movies);

for (let i = 0; i < films.length; i++){
    let buttonId = "button" + i;
    let movie = `
    <div class="container">
        <div class="poster">
            <img class="pic" src="${films[i].image}">
        </div>
        <div class="text-box">
            <div class="details">
                <h2>${films[i].title}</h2>
                <p>${films[i].releaseDate}</p>
                <p>Genre: ${films[i].genre}</p>
                <p>Director: ${films[i].director}</p>
            </div>
            <div class="like-box">
                <input id="${buttonId}" type="button" class="btn" value="Like &#128077;" number="${i}"></input>
                <p class="counter"></p>
            </div>
        </div>
    </div>  
    `;
    $("#main2").append(movie);
    $("#${buttonId}.btn").next().text(Math.floor((Math.random()*100) + 1));
}

    $("#${buttonId}.btn").click(function() {
        let el = parseInt($("#${buttonId}.btn").next().text());
        $("#${buttonId}.btn").next().text(el+1);
    })