对两个图像使用一个函数

用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;
}

<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;
        }
    };

var clicks = 0;
function onClick(element) {
   var imge = element.src;
   if (clicks < 10 && imge.indexOf('up.png') != -1) {
       clicks++;
   } else if(clicks >0 && imge.indexOf('down.png') != -1) {
       clicks--;
   }
   document.getElementById("clicks").innerHTML = clicks;
};

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

向@bhushans添加逻辑以完成要求。当单击Up图像时，计数增加1，最大值为10；当单击down时，计数减少1，不应低于0。

小提琴

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

js应该是

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

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

示例代码段：

var result = 0, 
    img1 = document.getElementById('i1'),
    img2 = document.getElementById('i2'), 
    span = document.getElementById('clicks');
img1.addEventListener('click', calc);
img2.addEventListener('click', calc);
function calc(e) {
    var img = e.target;
    result = img.id == 'i1' ? (result+1) : (result-1);
    result = result < 0 ? 0 : result > 10 ? 10 : result;
    span.textContent = result;
}

img { cursor: pointer; margin: 5px; vertical-align: middle; }

<div class="like-buttons">
    <img id='i1' src="//placehold.it/32x32?text=Up" title="Up" />
    <span id="clicks">0</span>
    <img id='i2' src="//placehold.it/32x32/?text=Dn" title="Down" />
</div>

你可以试试这个：正如Johan所评论的，传递flag。标志可以是真/假或向上/向下，也可以是您想要的任何东西，它将标识单击的按钮(向上或向下(。

参见以下代码

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

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

看看这个片段是否是更好的解决方案，以便获得多个图像和相同的结果。我还为-1 添加了一个0控件

$(document).ready(function(){
  $('.up').click(function() {
    var clicks = parseInt($(this).parent().find('.clicks').html());
    clicks = clicks +1
    if(clicks == 10) {
        $(this).hide();
    }
    
    $(this).parent().find('.clicks').html(clicks);
  });
  
  $('.down').click(function() {
    var clicks = parseInt($(this).parent().find('.clicks').html());
    if(clicks > 0) {
        clicks = clicks - 1
    }
    if(clicks < 10) {
       $(this).parent().find('.up').show()
    }
    
    $(this).parent().find('.clicks').html(clicks);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="like-buttons">
  <button type="button" class="up">+1</button>
  <span class="clicks">0</span>
  <button type="button" class="down">-1</button>
</div>
<div class="like-buttons2">
  <button type="button" class="up">+1</button>
  <span class="clicks">0</span>
  <button type="button" class="down">-1</button>
</div>