时间戳

首页 > 解决方案 > 单击按钮时如何增加ID值？使用 jquery, javascript

javascript - 单击按钮时如何增加ID值？使用 jquery, javascript

问题描述

当我按下点击按钮时，如何更改为 id="number1"？

并且数组中的文本也必须改变。

减去 ${count++} 会更改文本。

我希望我可以将 ID 值从 1 更改为 40。

我应该怎么办？请帮我。

$(() => {
    const TITLE_NUM = 1;

    let textData = [
        "test2",
        "test3",
        "test4",
        "test5",
    ]

    let onSelectFocus = (x) => {
        let text = textData[x];
        var count = 0;
        $(`.text_box #number${count++}`).text(text).fadeIn();
    }

    for (let i = 0; i < TITLE_NUM; i ++) {
        $('.button').on('click', function(){
            onSelectFocus(i++);
        })
    }
})
.text_box{
    width: 500px;
    height: 300px;
    background: orange;
    margin: 0 auto;
    align-items: center;
    justify-content: center;
    text-align: center;
    display: flex;
}

.button {
    width: 50px;
    height: 50px;
    background: #000;
    margin: 0 auto;
    color: #fff;
    display: flex;
    justify-content: center;
    margin-top: 40px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
</head>
<body>
    <div class="text_box">
        <p id="number">test1</p>
    </div>
    <div class="button"><p>click</p></div>
    <script src="main.js"></script>
</body>
</html>

标签： javascriptjqueryarraysfor-loop

解决方案

对你起作用吗？

$(() => {    
    $('.button').on('click', function() {
        const TITLE_NUM = 1;
        let textData = [
          "test1", // I added it as the first element.
          "test2",
          "test3",
          "test4",
          "test5",
      ];

    
        //Getting elements in .text_box starting attr id from 'number'
        let $number = $(`.text_box [id^=number]`);
        //Get the attribute value
        let id = $number.attr('id');
        //Parse current number
        let num = parseInt(id.replace("number", ""))
        //If it is not a number assing 0
        if (isNaN(num)) {
          num = 0;
        } else {
        //Else increment the number
          num++;
        }
        //If we have reached the last element, reset the pointer
        if (num >= textData.length) {
          num = 0;
        }
        //New id value
        let newId = `number${num}`
        //And finaly assing it
        $(`.text_box [id^=number]`)
          .text(textData[num])        //Replace content by array value
          .fadeIn()
          .attr('id', newId);           //Assign the new id attribute
        
    })
    
})
.text_box{
    width: 500px;
    height: 300px;
    background: orange;
    margin: 0 auto;
    align-items: center;
    justify-content: center;
    text-align: center;
    display: flex;
}

.button {
    width: 50px;
    height: 50px;
    background: #000;
    margin: 0 auto;
    color: #fff;
    display: flex;
    justify-content: center;
    margin-top: 40px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
</head>
<body>
    <div class="text_box">
        <p id="number0">test1</p>
    </div>
    <div class="button"><p>click</p></div>
    <script src="main.js"></script>
</body>
</html>

推荐阅读