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

【问题标题】：How to increase the ID value when I clickd button? with jquery, javascript单击按钮时如何增加ID值？使用 jquery, javascript
【发布时间】：2021-08-05 10:02:19
【问题描述】：

点击按钮时如何更改为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>

【问题讨论】：

但是，没有number1 的元素？你也需要创建它们吗？
将var count = 0; 放入函数中意味着函数运行时count 将始终为0。可能不是你想要的？
@Swati 对不起。我不知道它是什么。
@ChrisG 包含 varcount=0 时没有任何效果。

标签： javascript jquery arrays for-loop

【解决方案1】：

它对你有用吗？

$(() => {    
    $('.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>

【讨论】：

操你的安德鲁！但我也想使用 for-loop 和 textData。还有其他方法吗？
当然，检查这个变体