Question

我知道这似乎经常被问到......但有时候你最终无法弄清楚出了什么问题。像下面的代码。 jquery似乎不起作用。

帮助表示赞赏。

Jquery的

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script>
<script type="javascript/text">
$(document).ready(function(){
$('#buy').click(function(){$('#buyform').fadeIn('fast');});
$('#sell').click(function(){$('#sellform').fadeIn('fast');});
$('#rent').click(function(){$('#rentform').fadeIn('fast');});
});
</script>

CSS

<style type="text/css">
.options ul li{listing-style-type:none;display:inline;margin:5px;margin-bottom:3px;background-  color:purple;color:white;padding:5px;border-radius:5px;}
#buyform,#sellform,#rentform{display:none}
#buy,#sell,#rent{cursor:pointer;}
</style>

HTML

<div class="topsearchbox">
<div class="options">
    <ul><li id="buy">Buy</li><li id="sell">Sell</li><li id="rent">Rent</li></ul>
</div>
</div>

<div class="form">
<div class="formchange">

    <div id="buyform">
        <form name="searchform" action="" method="POST">
        <label class="formlabel">Property</label>
        <select><option></option></select><select><option></option></select><select><option></option></select>
        <input type="submit" name="formsubmit">
        </form>
    </div>

    <div id="sellform">
        <form name="searchform" action="" method="POST">
        <label class="formlabel">Property</label>
        <select><option></option></select><select><option></option></select><select><option></option></select>
        <input type="submit" name="formsubmit">
        </form>
    </div>

    <div id="rentform">
        <form name="searchform" action="" method="POST">
        <label class="formlabel">Property</label>
        <select><option></option></select><select><option></option></select><select><option></option></select>
        <input type="submit" name="formsubmit">
        </form>
    </div>
</div>
</div>

很想知道我做错了什么！

Answer 1

在<script> ..code..</script>

中添加代码

试试这种方式

<div class="options">
        <ul>
            <li id="buy" data-div="buyform">Buy</li>
            <li id="sell" data-div="sellform">Sell</li>
            <li id="rent" data-div="rentform">Rent</li>
        </ul>
</div>

脚本

$(document).ready(function () {
    $('.options ul li').click(function () {
        var con = $(this).data('div');
        $('#' + con).fadeIn('slow').siblings('div').fadeOut('slow')
    });
});

DEMO

Answer 2

有两个原因很容易解决。

<script type="javascript/text">这应该是<script type="text/javascript">
您以错误的顺序关闭jQuery文档就绪函数

)};应该是});

享受

Answer 3

您的脚本块在包围和类型中都有错误。以下是解决方案。

    <script type="text/javascript">
$(document).ready(function(){
$('#buy').click(function(){$('#buyform').fadeIn('fast');});
$('#sell').click(function(){$('#sellform').fadeIn('fast');});
$('#rent').click(function(){$('#rentform').fadeIn('fast');});
});
</script>

jquery代码似乎没有响应

3 个答案: