javascript - 每次新点击都有新 Action

Question

已编辑

使其更具体。

这是我的代码。

<div class="ccms_form_element cfdiv_file" id="attachment_1_container_div" style="margin: 0; padding: 0;">
    <label for="attachment_1">Συννημένα:</label>
    <input id="attachment_1" class="" title="" type="file" name="attachment_1">
    <img src="http://www.saveursdebacchus.com/medias/images/plus-sign.png" id="plus" onclick="addfield()" style="width: 35px; position: relative; top: 4em; cursor: pointer;">
</div>
<div class="ccms_form_element cfdiv_file" style="display: none; position: relative; left: 11.5em; margin: 0px; padding: 0px;height: 38px;" id="attachment_2_container_div">
    <input id="attachment_2" class="" title="" type="file" name="attachment_2" style="position: relative; top: -1em;">
    <img src="http://etc-mysitemyway.s3.amazonaws.com/icons/legacy-previews/icons/3d-glossy-orange-orbs-icons-alphanumeric/104914-3d-glossy-orange-orb-icon-alphanumeric-minus-sign-simple.png" id="minus" onclick="removefield()" style="width: 35px;position: relative;left: 3em;top: 0.095em; cursor: pointer;">
</div>
<div class="ccms_form_element cfdiv_file" id="attachment_3_container_div" style="position: relative; left: 11.5em; margin: 0; padding: 0; display: none;">
    <input type="hidden" name="attachment_3" value="" alt="ghost">
    <input id="attachment_3" class="" title="" type="file" name="attachment_3">
</div>

我想要的是，单击img#plus时显示下一个字段(例如div#attachment_2_container_div)以及要关闭到新显示的图像 field 。进行 2 次(第一次是 div#attachment_2_container_div，第二次是 div#attachment_3_container_div)。还有 img#minus 的逆方法。

我认为它需要的代码超过 5-10 行。这就是为什么我一点一点地问。

我将遵循一种更简单的方式(我将在每一行中给出图像，并在 div 的显示上我将获取我想要的结果)。抱歉给您带来任何麻烦。

Answer 1

根据按钮收到的点击次数逐渐向下移动按钮，因此“跳跃”每次都会变大 1em，您可以调整 addfile 中“计数器”变量递增的方式来更改“跳跃”

不确定这是否是您要找的，相对不清楚的问题

[修订包括 1,3,5em 跳跃]

    var imgObj = null;
    var counter = 0;
    function init(){
       imgObj = document.getElementById('plus');
       imgObj.style.position= 'relative'; 
       imgObj.style.top = '1em'; 
    }
    function addfile(){
       counter++;
       if(counter==1){
           imgObj.style.top = parseInt(imgObj.style.top) + 1 + 'em';
        }
        else if(counter==2){
           imgObj.style.top = parseInt(imgObj.style.top) + 3 + 'em';

        }
        else if(counter==3){
           imgObj.style.top = parseInt(imgObj.style.top) + 5 + 'em';
        }
        else
           imgObj.style.top = parseInt(imgObj.style.top) + 0 + 'em';
    }
    window.onload =init;