Question

EDITED

使其更具体。

这是我的代码。

<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），然后关闭的图像关闭到新显示的字段。这是2次（第一次为div#attachment_2_container_div，第二次为div#attachment_3_container_div）。还有img#minus的反方法。

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

我将按照更简单的方式（我将在每一行中提供图像并显示div我会得到我想要的结果）。对不起有任何麻烦。

Answer 1

按钮接收的点击次数逐渐向下移动按钮，因此“跳跃”每次增加1em，你可以调整'counter'变量在addfile中递增的方式来改变'jumps'

不确定这是否是您正在寻找的，相对不明确的问题

[修订包括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;

Answer 2

我不确定你想要什么，但根据我的理解我的问题我做了一个小提琴，这里是链接，希望它是你需要的:) fiddle click here

var my=null; //dont consider this line, m new here, pls ignore

我已经在你的HTML中做了修改，而且函数是javascript和jquery的混合。

每次点击新动作

2 个答案: