在 JavaScript 中递增、递减 href

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

我要做的是获取 class 作为 nav_btn 的元素总数使用

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

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

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

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

此外，我强烈建议您检查Jquery.Check link中的next()函数以获取文档：link

Answer 2

与纯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
    });

} )

在 JavaScript 中递增、递减 href

Increment, decrement href in JavaScript

html

javascript

pdo

slider

href