Question

我有一组可点击的图片，用于指定所提供的特定服务。当用户单击图像时，与该服务关联的表单将滑入框架中。所有表单都是多部分的，后续部分可通过可点击的div访问（如“CONTINUE”按钮）。所有表格均以“Step1”开头，后续部分根据所选服务而有所不同。

我要做的是根据所选服务更改'CONTINUE按钮'的.click (function()。

这是HTML：

<div class="form-holder">
<form id="inquiry" action="" method="" enctype="multipart/form-data">

<div class="select">
<p>Please select a service from the options below:</p>

<div id="service1"><img class="product_img" src="" alt=" " />
<h1 style="margin-top: 0px">SERVICE ONE</h1></div>

<div id="service2"><img class="product_img" src="" alt="" />
<h1>SERVICE TWO</h1></div>

</div><!--End Select-->

<div id="step1">

<fieldset id="field1">
<legend>Contact Information</legend>

<div class="inline">
<div> Company Name:<br />
<input name="Company Name" size="20" type="text" /></div>

<div>Contact Person: <br />
<input name="Contact Person" size="20" type="text" /></div>

<div> Title/Affiliation: <br />
<input name="Affiliation" size="20" type="text" /></div></div>

</fieldset>

<div id="next1" class="next1">CONTINUE</div>

</div><!--End Step1-->



<div id="step2">

<fieldset>
<legend>Company Information</legend>

<div class="inline2">
<div> Products/Services:<br />
<textarea id="inline" name="Products"></textarea></div>

<div> Affiliations/Licensing: <br />
<textarea id="inline" name="Licenses"></textarea></div></div>

</fieldset>

<div class="next2">CONTINUE</div>

</div><!--End Step2-->



<div id="step3">

<fieldset>
<legend>Design Goals</legend>

<div class="inline2">
<div>
<textarea id="inline" name="Examples"></textarea></div>
<div>
<textarea id="inline" name="Features"></textarea></div></div>

<div>Additional Information :<br />
<textarea id="full" name="Comments"></textarea></div>

</fieldset>

<input id="send" type="submit" value="Sumit Query"><input type="reset" value="Clear" style="margin-left: 490px" />

</div><!--End Step3-->

</form>

这是jQuery：

$(document).ready(function() {
$("#service1").click(function() {
$(".select").animate({width:"0%"}, 1000);
$("#step1").animate({width:"77%"}, 1000);
});
});


$(document).ready(function() {
$(".next1").click(function() {
$("#step1").animate({width:"0%"}, 1000);
$("#step2").animate({width:"77%"}, 1000);
});
});

$(document).ready(function() {
$("#service2").click(function() {
$(".select").animate({width:"0%"}, 1000);
$("#step1").animate({width:"77%"}, 1000);
$("#next1").addClass('next2').removeClass('next1');
});
});

$(document).ready(function() {
$(".next2").click(function() {
$("#step1").animate({width:"0%"}, 1000);
$("#step3").animate({width:"77%"}, 1000);
});
});

目标是在选择"#next1"时更改"#service2"的类，以便为表单的＃step3而不是"#step2"设置动画。

这可能吗？

我对jQuery很新，可以使用我能得到的所有帮助。提前感谢您提供的任何帮助。

M.J。

Answer 1

如果您想将点击事件更改为空或其他内容，则可以使用bind()和unbind()。

// bind click
$('#myelement').bind('click', function() { 
   // do work
});

// unbind click
$('#myelement').unbind('click');

Answer 2

你应该研究一些事情......

首先，你写的所有内容都应该在：

之内

 $(document).ready(function(){

这里有四个单独的部分，但它们都应该在就绪函数中。

我不确定我理解你要做什么，但我会考虑创建两种不同的形式并将它们添加到两个不同的div中。如果用户点击选项，则会淡化相应的表单。

 $("#service1").click(function() {
    $("#service1form").fadeIn();
 });

然后你可以使用这样的东西作为你的继续按钮：

 $("#service1form .continue").click(function(){...

或

 $('#service1form .step2").click(function(){....

希望这有帮助！

Answer 3

更改元素的类时，jQuery不会更改使用.bind()时的绑定事件或.click()之类的速记事件方法，因为jQuery会设置这些事件处理程序一次当您调用这些方法并且无法识别您已将元素类更改为其他内容时，您已定义了事件处理程序，现在使用它们，除非您使用.live()。

.bind（）的说明： “将处理程序附加到元素的事件。”

要解决此问题，请使用.live()方法。

.live（）的说明： “为现在和将来与当前选择器匹配的所有元素附加事件处理程序。”

您的解决方案的关键字是“未来”。通过更改您想要的元素类，然后使用您为该类设置的绑定事件，而不是您在页面加载时为其最初具有的类设置的事件，这将允许这样做。

$(document).ready(function() {
    $("#service1").click(function() {
        $(".select").animate({width:"0%"}, 1000);
        $("#step1").animate({width:"77%"}, 1000);
    });

    $("#service2").click(function() {
        $(".select").animate({width:"0%"}, 1000);
        $("#step1").animate({width:"77%"}, 1000);
        $("#next1").addClass('next2').removeClass('next1');
    });

    $(".next1").live('click', function() {
        $("#step1").animate({width:"0%"}, 1000);
        $("#step2").animate({width:"77%"}, 1000);
    });

    $(".next2").live('click', function() {
        $("#step1").animate({width:"0%"}, 1000);
        $("#step3").animate({width:"77%"}, 1000);
    });
});

以下是展示.bind()和.live()的演示fiddle。

使用jQuery更改.click（function（）{元素

3 个答案: