Javascript 对两个图像使用一个函数

考虑以下标记

<div class="like-buttons">
  <img src="up.png" onclick="onClick()" />
  <span id="clicks">0</span>
  <img src="down.png" onclick="onClick()" />
 </div>

0

以及下面的JavaScript函数

<script type="text/javascript">
    var clicks = 0;
    function onClick() {
        if (clicks < 10) {
            clicks += 1;
            document.getElementById("clicks").innerHTML = clicks;
        } else {
            document.getElementById("clicks").innerHTML = clicks;
        }
    };
</script>

var=0；
函数onClick（）{
如果（单击次数<10次）{
点击次数+=1；
document.getElementById（“clicks”）.innerHTML=clicks；
}否则{
document.getElementById（“clicks”）.innerHTML=clicks；
}
};

现在我试图实现的是，当点击

Up

image时，计数最多会增加1到10，而当点击

down

时，计数会减少1，并且不应低于0。目前计数上升，但我想知道是否有一种方法可以为同一个函数中的每个图像添加一个事件，或者我必须为每个图像编写两个单独的函数

提前感谢您的帮助

使用param调用onClick（）函数，例如onClick（1）（用于向上按钮）和onClick（-1）用于向下按钮

function onClick(value) {
    var clicks = parseInt(document.getElementById("clicks").innerHTML);
    clicks += value;
    if (clicks > 10)
        clicks = 10;
    if (clicks < 0)
        clicks = 0;
    document.getElementById("clicks").innerHTML = clicks;
}

函数onClick（值）{
var clicks=parseInt（document.getElementById（“clicks”）.innerHTML）；
单击+=值；
如果（单击次数>10次）
点击次数=10次；
如果（单击次数<0）
点击次数=0；
document.getElementById（“clicks”）.innerHTML=clicks；
}

使用参数调用onClick（）函数，例如onClick（1）（用于向上按钮）和onClick（-1）用于向下按钮

function onClick(value) {
    var clicks = parseInt(document.getElementById("clicks").innerHTML);
    clicks += value;
    if (clicks > 10)
        clicks = 10;
    if (clicks < 0)
        clicks = 0;
    document.getElementById("clicks").innerHTML = clicks;
}

函数onClick（值）{
var clicks=parseInt（document.getElementById（“clicks”）.innerHTML）；
单击+=值；
如果（单击次数>10次）
点击次数=10次；
如果（单击次数<0）
点击次数=0；
document.getElementById（“clicks”）.innerHTML=clicks；
}

您可以尝试这样做：正如Johan评论的那样，通过标志。标志可以是真/假或上/下或任何您想要的东西，用于标识单击的按钮（上或下）

请参阅下面的代码

var点击次数=0；
函数onClick（标志）{
如果（标记和单击<10）
点击次数+=1；
如果（！flag&&clicks>0），则为else
点击次数-=1；
document.getElementById（“clicks”）.innerHTML=clicks；
};

0
您可以尝试这样做：正如Johan评论的那样，通过标志。标志可以是真/假或上/下或任何您想要的东西，用于标识单击的按钮（上或下）

请参阅下面的代码


var点击次数=0；
函数onClick（标志）{
如果（标记和单击<10）
点击次数+=1；
如果（！flag&&clicks>0），则为else
点击次数-=1；
document.getElementById（“clicks”）.innerHTML=clicks；
};

0
为了获得多个图像和相同的结果，如果这是一个更好的解决方案，请查看此代码段。我还为-1添加了一个0控件


$（文档）.ready（函数（）{
$（'.up'）。单击（函数（）{
var clicks=parseInt（$（this.parent（）.find（'.clicks'）.html（））；
点击次数=点击次数+1
如果（单击==10）{
$（this.hide（）；
}
$（this.parent（）.find（'.clicks'）.html（clicks）；
});
$（'.down'）。单击（函数（）{
var clicks=parseInt（$（this.parent（）.find（'.clicks'）.html（））；
如果（单击>0）{
点击次数=点击次数-1
}
如果（单击次数<10次）{
$（this.parent（）.find（'.up'）.show（）
}
$（this.parent（）.find（'.clicks'）.html（clicks）；
});
});

+1
0
-1
+1
0
-1
为了获得多个图像和相同的结果，如果这是一个更好的解决方案，请查看此代码段。我还为-1添加了一个0控件


$（文档）.ready（函数（）{
$（'.up'）。单击（函数（）{
var clicks=parseInt（$（this.parent（）.find（'.clicks'）.html（））；
点击次数=点击次数+1
如果（单击==10）{
$（this.hide（）；
}
$（this.parent（）.find（'.clicks'）.html（clicks）；
});
$（'.down'）。单击（函数（）{
var clicks=parseInt（$（this.parent（）.find（'.clicks'）.html（））；
如果（单击>0）{
点击次数=点击次数-1
}
如果（单击次数<10次）{
$（this.parent（）.find（'.up'）.show（）
}
$（this.parent（）.find（'.clicks'）.html（clicks）；
});
});

+1
0
-1
+1
0
-1
您可以对两个图像使用与事件处理程序相同的函数。只需检查
事件
对象的
id
，即可检查是添加还是减去

示例代码段：


var结果=0，
img1=document.getElementById（'i1'），
img2=document.getElementById（'i2'），
span=document.getElementById（'clicks'）；
img1.addEventListener（“点击”，计算）；
img2.addEventListener（“单击”，计算）；
函数计算（e）{
var img=e.目标；
结果=img.id=='i1'？（结果+1）：（结果-1）；
结果=结果<0？0：结果>10？10：结果；
span.textContent=结果；
}
img{光标：指针；边距：5px；垂直对齐：中间；}

0
您可以对两个图像使用与事件处理程序相同的函数。只需检查
事件
对象的
id
，即可检查是添加还是减去

示例代码段：


var结果=0，
img1=document.getElementById（'i1'），
img2=document.getElementById（'i2'），
span=document.getElementById（'clicks'）；
img1.addEventListener（“点击”，计算）；
img2.addEventListener（“单击”，计算）；
函数计算（e）{
var img=e.目标；
结果=img.id=='i1'？（结果+1）：（结果-1）；
结果=结果<0？0：结果>10？10：结果；
span.textContent=结果；
}
img{光标：指针；边距：5px；垂直对齐：中间；}

0

var点击次数=0；
函数onClick（元素）{
var imge=element.src；
如果（单击<10&&imge.indexOf（'up.png'）！=-1）{
点击++；
}else if（单击>0&&imge.indexOf（'down.png'）！=-1）{
点击--；
}
document.getElementById（“clicks”）.innerHTML=clicks；
};

0

var点击次数=0；
函数onClick（元素）{
var imge=element.src；
如果（单击<10&&imge.indexOf（'up.p
var clicks = 0;

function onClick(flag) {

        if (flag) {
            if (clicks < 10) {
            clicks += 1;
        } }else{ 
            if (clicks > 0) {
            clicks -= 1;
        }
        }
        document.getElementById("clicks").innerHTML = clicks;

}

<div class="like-buttons">
  <img src="up.png" onclick="onClick(plus)" />
  <span id="clicks">0</span>
  <img src="down.png" onclick="onClick(min)" />
 </div>

<script type="text/javascript">
    var clicks = parseInt(document.getElementById("clicks").innerHTML);
    function onClick(type){
        if (type=='plus' && clicks < 10) {
            clicks += 1;
            document.getElementById("clicks").innerHTML = clicks;
        } else {
            if (clicks > 0) clicks -= 1;
            document.getElementById("clicks").innerHTML = clicks;
        }
    };