2012-04-13 2 views
0

Я получил упорядоченный списокIncrement HREF значение на единицу (Javascript)

<li id="prev"> 
    <a href="#fragment-1>Next</a> 
</li> 

Я хочу, чтобы увеличить значение

<a href="#fragment-1">... 
<a href="#fragment-2">... 
<a href="#fragment-3">... 
<a href="#fragment-4">... 

href Когда следующий щелкают он должен остановиться от 4 и вернуться к 1 allso возможно с JavaScript на всех

Спасибо

ответ

3

G сначала сделайте ссылку id, чтобы сделать ее проще.

Затем

document.getElementById('the_id_here').addEventListener('click', function(e) { 
    var n = e.target.href.split('-')[1] * 1 + 1; 
    if (n > 4) 
     n = 1; 
    e.target.href = e.target.href.split('-')[0] + '-' + n; 
}, false); 

Пример: http://jsbin.com/ajegaf/4#fragment-1

0

Не совсем то, что вы хотите, но должны быть достаточно близко, чтобы стремиться вас в правильном направлении, проверьте http://jsfiddle.net/pj28v/

<ul id="list"></ul> 
<a href="#" id="next">Next</a>​ 

$(function() { 

    var $list = $('#list'), 
     count = 4, 
     i = 0, 
     cur = 0; 

    for (; i < count; i++) { 
     $list.append('<li><a href="#fragment' + i + '">frag' + i + '</a></li>'); 
    } 

    $('a', $list).eq(0).css('color','red'); 

    $('#next').click(function(ev) { 
     ev.preventDefault(); 
     cur++; 
     if (cur >= count) cur = 0; 
     $('a', $list).css('color','blue').eq(cur).css('color','red'); 
    }); 
});​ 
0

Раствор JQuery :

$(document).ready(function(){ 

    $('#prev a').click(function(){ 

     var href = $(this).attr('href'); 
     var num = parseInt(href.substr(href.indexOf('-') + 1)); 

     if(num == 4) 
     { 
      num = 1; 
     } 
     else 
     { 
      num++; 
     } 

     $(this).attr('href', '#fragment-' + num) 
    }); 

});​ 

http://jsfiddle.net/UYDdB/

0

Решение похожее на Delan's, но с jQuery и без использования теста. http://jsfiddle.net/GZ26j/

$('#next').on('click', function(e) { 
    e.preventDefault(); 
    href = $(this).attr('href'); 
    var n = href.split('-')[1] * 1 + 1; 
    n = n%5; 
    e.target.href = href.split('-')[0] + '-' + n; 
});​ 

Редактировать: Это решение делает старт счетчика на 0, а не 1

+0

n% 5 не работает после того, как он доходит до 4, затем он снова начинается с нуля вместо одного. – harag

+0

О, ты прав, я забыл, что он должен начинаться с 1. – TimPetricola

0

использовать скрытое поле для хранения значения, и функцию OnClick, чтобы увеличить его и представить форму. СМ.: How can I increase a number by activating a button to be able to access a function each time the button is increased?

<? 

if(!isset($_GET['count'])) { 
    $count = 0; 
    } else { 
    $count = $_GET['count']; 
    } 

    ?> 

    <script type='text/javascript'> 
    function submitForm(x) { 
    if(x == 'prev') { 
    document.getElementById('count').value--; 
    } else { 
    document.getElementById('count').value++; 
    } 

    document.forms["form"].submit(); 
    } 
    </script> 

    <form action='hidfield.php' method='get' name='form'> 
    <input type='hidden' name='count' id='count' value='<?php echo $count; ?>'> 
    </form> 

    <input type='submit' name='prev' value='prev' onclick="submitForm('prev')"> 
    <input type='submit' name='next' value='next' onclick="submitForm('next')"> 
Смежные вопросы