Question

考虑以下标记

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

以下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>

现在我想要实现的是，当点击Up图片时，计数会上升1到最多10，当点击down时，计数会下降1并且不应该低于0.目前计数上升但是我想知道是否有一种方法可以为同一功能中的每个图像添加一个事件，或者我必须为每个图像写一个两个单独的函数？

提前感谢您的帮助

Answer 1

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

Answer 2

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

Answer 3

你可以试试这个：正如约翰评论的那样，传递旗帜。标记可以是真/假或上/下或任何您想要的标识单击哪个按钮（向上或向下）。

见下面的代码

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

如果可以是更好的解决方案，请查看此代码段，以便拥有多个图像和相同的结果。我还为-1

添加了0控件

＆＃13;

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

＆＃13;

{{1}}

＆＃13;

Answer 5

您可以为两个图像使用与事件处理程序相同的功能。只需检查id对象的event即可检查是否加减。

示例代码段：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 6

SELECT * FROM @DRIVER D
INNER JOIN @MYTABLE M
ON D.[Line] = M.[LINE]
WHERE M.[MAKE] <> '99999'

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

Answer 7

向@bhushans ans添加逻辑以完成要求，当点击向上图像时，计数上升1到最大值10，当点击向下时，计数下降1并且不应低于0。 / p>

fiddle

Document fields=new Document("nameOne","aa").append("nameTwo","bb");
Document elemMatch = new Document("$elemMatch", fields);
                Document exactElemMatch = new Document();
                exactElemMatch.append(MongoConstants.NAME_IDENTITY, elemMatch);
        Document        resultDocument = mongoDatabase.getCollection(test).find(exactElemMatch).first(); . With this i am getting the whole document but what i want id just the matching criteria i.e., `{"nameOne":"aa","nameTwo":"dd"}`. Where am i going wrong ? And is it possible to get the index of matched document ?

和js应该是

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

    <img src="down.png" onclick="onClick(false)" />
</div>

使用一个功能两个图像

7 个答案: