简单的Javascript onclick问题

时间:2012-07-06 02:44:38

标签: javascript

我正在尝试向链接添加onclick方法。

我希望在用户点击linkA时创建++,并且 - 当用户点击linkB时,无论a值是什么,都要创建。

我的代码:

JS

var a=0;

function swapPost(a){

 //I want to make a++ when user click linkA;
 //a-- when user click linkB
 //not sure how to do this

   if(a>10){
    a=0;
   }
    if(a<0){
    a=0;
   }

}

swapPost(a);

HTML

<a href="#" onclick="swapPost(a)">LinkA</a>
<a href="#" onclick="swapPost(a)">LinkB</a>

我想知道是否有人可以帮我解决这个问题。非常感谢。

3 个答案:

答案 0 :(得分:2)

不是将a作为参数传递,而是通过其id(您尚未定义)传入被点击的链接。将this传递给函数。

<a id='linka' href="#" onclick='swapPost(this)'>LinkA</a>
<a id='linkb' href="#" onclick='swapPost(this)'>LinkB</a>

var a=0;    
function swapPost(nodeClicked){
   // Check the id of the node passed to the function.
   if (nodeClicked.id == 'linka') {
     a++;
   }
   else if (nodeClicked.id == 'linkb') {
     a--;
   }
   else return;

   // Set to zero if outside your bounds
   if(a>10){
    a=0;
   }
    if(a<0){
    a=0;
   }
}

Here it is in action,登录控制台......

通常,最好将函数绑定到事件而不是将它们内联到属性中。由于this中的onclick指的是被点击的节点,因此实际上并不需要将其作为参数传递。然后,您可以绑定onclick事件而不进行内联,并在其中调用this

<a id='linka' href="#">LinkA</a>
<a id='linkb' href="#">LinkB</a>

var a=0;    
var swapPost = function(){
   // Check the id of the node passed to the function.
   if (this.id == 'linka') {
     a++;
   }
   else if (this.id == 'linkb') {
     a--;
   }
   else return;

   // Set to zero if outside your bounds
   if(a>10){
    a=0;
   }
    if(a<0){
    a=0;
   }
}
// Bind the function to the links
document.getElementById('linka').onclick = swapPost;
document.getElementById('linkb').onclick = swapPost;

Here's the updated version in action

答案 1 :(得分:1)

<a href="#" id="a">LinkA</a>
<a href="#" id="b">LinkB</a>​

<强> JS

<script type="text/javascript">
window.onload=function(){
    var a=0;
    var els=document.getElementsByTagName('a');
    for(i=0;i<els.length;i++)
    {
        (function(i){
            els[i].onclick=function(){
                if(this.id=='a') a++;
                else a--;
                a = a < 0 ? 0 : (a > 10 ? 0 : a);
                return false;
            }
        })(i);
    }
}
</script>

DEMO.

答案 2 :(得分:0)

试试这个:   使用Javascript:

var a=0;
function swapPost(val){
  a=a+val;
 }

HTML:

  <a href="#" onclick='javascript:return swapPost(1);'>LinkA</a>
  <a href="#" onclick='javascript:return swapPost(-1);'>LinkB</a>