Increment, decrement href in JavaScript

Question

我有一个图片库，我会滑动两个按钮。

数据库中的值：

<?php
$sql = "SELECT * FROM struttura ORDER BY id_img";
$result = $pdo->query($sql);
while ($row = $result->fetch())
{
    $id_img = $row['id_img'];
    $file = $row['file'];
    $text = $row['text'];
    ?> 
    <li><img src="images/<?php echo htmlspecialchars($file, ENT_QUOTES, 'UTF-8');?>" id="<?php echo htmlspecialchars($id_img, ENT_QUOTES, 'UTF-8');?>" /></li>
    <?php
}
?>

这是用于导航的div

<div class="navigation">
<a href="#" class="nav_prev js-shown">Prev</a>
<a href="#" class="nav_btn"></a>
<a href="#" class="nav_btn"></a>
<a href="#" class="nav_next js-shown">Next</a>
</div>

如何使用 JavaScript 以这种方式增加或减少href的值？

<a href="#1" class="nav_btn"></a>
<a href="#2" class="nav_btn"></a>
<a href="#3" class="nav_btn"></a>
...

提前谢谢你！

Answer 1

with pure javascript

var link = document.getElementsByClassName('nav_btn');
for(var i = 0; i< link.length; i++){
    link[i].href = '#'+(i+1);
    link[i].innerHTML = '#'+(i+1);
}

你可以使用 jQuery 每个循环

$( function(){
    $('.navigation').find('.nav_btn').each(function(i){
        var $this = $(this);
        $this.attr('href','#'+i); // this will return from #0 you can this with '#'+i+1
    });
} )

Answer 2

我要做的是获取该类的元素总数nav_btn 使用

var x=$(".nav_btn").length;

然后，您可以将变量设置为 y=0 。按下next按钮时，您可以增加它，并更新 href。

如果需要更改属性，可以使用setAttribute方法。

当您达到最大计数（==长度）时，重置为零。上一个按钮的类似流程。

另外，我强烈建议您检查 Jquery 中的 next() 函数。检查文档链接：链接