Question

我有一个带有以下标记的静态页面

 <div class="middle-content">
    <div class="white-div">
        <div class="like-buttons">
            <img id="1" src="up.png" onclick="onClick(true, this.id)" />
            <span id="clickOne">0</span>
            <img id="2" src="down.png" onclick="onClick(false, this.id)" />
        </div>
        <div class="tex-area">
            <h4>Heading One</h4>
            <p>Some random paragraph</p>
        </div>
    </div>
    <div class="red-div">
        <div class="like-buttons">
            <img id="3" src="up.png" onclick="onClick(true, this.id)" />
            <span id="clickTwo">0</span>
            <img id="4" src="down.png" onclick="onClick(false, this.id)" />
        </div>
        <div class="tex-area">
            <h4>Heading Two</h4>
            <p>Some random paragraph</p>
        </div>
    </div>
    <div class="white-div">
        <div class="like-buttons">
            <img id="5" src="up.png" onclick="onClick(true, this.id)" />
            <span id="clickThree">0</span>
            <img id="6" src="down.png" onclick="onClick(false, this.id)" />
        </div>
        <div class="tex-area">
            <h4>Heading Three</h4>
            <p>Some random paragraph</p>
        </div>
    </div>
    <div class="red-div">
        <div class="like-buttons">
            <img id="7" src="up.png" onclick="onClick(true, this.id)" />
            <span id="clickFour">0</span>
            <img id="8" src="down.png" onclick="onClick(false, this.id)" />
        </div>
        <div class="tex-area">
            <h4>Heading Four</h4>
            <p>Some random paragraph</p>
        </div>
    </div>
</div>

我的JavaScript功能如下：

<script type="text/javascript">
    var clicks = 0;
    function onClick(flag, id) {
        alert(id); //Displays empty 
        if (flag && clicks < 10)
            clicks += 1;
        else if (!flag && clicks > 0)
            clicks -= 1;
        document.getElementById("clickOne").innerHTML = clicks;
        //How to ensure only relevant count goes up depending on the image clicked?
    };
</script>

我想要实现的是当用户点击其中一个图像时，只有特定部分的跨度计数上升而没有其他部分。我已经尝试传递id，但alert返回为空白。有人可以建议我出错的地方或者解决这个问题的正确方法。

提前感谢您的帮助。

Answer 1

试试这个：

<div class="red-div">
    <div class="like-buttons">
        <img id="3" src="up.png" onclick="onClick(true, 'clickTwo')" />
        <span id="clickTwo">0</span>
        <img id="4" src="down.png" onclick="onClick(false, 'clickTwo')" />
    </div>
    <div class="tex-area">
        <h4>Heading Two</h4>
        <p>Some random paragraph</p>
    </div>
</div>


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

这是一个完全不需要ID的解决方案

<div class="white-div">
    <div class="like-buttons">
        <img src="up.png" onclick="onClick(true, this)" />
        <span>0</span>
        <img src="down.png" onclick="onClick(false, this)" />
    </div>
    <div class="tex-area">
        <h4>Heading One</h4>
        <p>Some random paragraph</p>
    </div>
</div>

和javascript

function onClick(flag, el) {
    var span = el.parentElement.querySelector('span');
    var clicks = parseInt(span.textContent, 10);
    if (flag && clicks < 10)
        clicks += 1;
    else if (!flag && clicks > 0)
        clicks -= 1;
    span.innerHTML = clicks;
};

这里有效 - http://jsfiddle.net/d1bd3eut/1/

我正在努力......

<div class="white-div">
    <div class="like-buttons">
        <img src="up.png" onclick="onClick(this)" />
        <span>0</span>
        <img src="down.png" onclick="onClick(this)" />
    </div>
    <div class="tex-area">
        <h4>Heading One</h4>
        <p>Some random paragraph</p>
    </div>
</div>

JS

function onClick(el) {
    var span = el.parentElement.querySelector('span');
    var clicks = parseInt(span.textContent, 10);
    var value = -Math.sign(el.src.indexOf('own.png'));
    clicks = Math.max(0, Math.min(clicks + value, 10));
    span.innerHTML = clicks;
};

小提琴http://jsfiddle.net/d1bd3eut/3/

将图像的id传递给功能并显示计数

1 个答案: