Question

经过长时间休息后返回JavaScript，我无法让它工作。我必须做的事情非常愚蠢，因为它在HTML文件中附加到按钮的onclick（''）工作正常，而不是在我尝试在script.js中执行时。

我试图包含所有应该需要的东西但是如果我错过了什么让我知道。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"</script>
<script type="text/javascript" src="script.js"></script>


<div class="application">
    <button type="button" class="solution" id="webSolution">
        <p>
    Website Solutions
    </p>
</button>
<button type="button" class="solution" id="mobileSolution">
    <p>
    Mobile Solutions
    </p>
</button>
</div>

<div class="mobileSolutionDetails">
<h3>
Mobile Solution
</h3>
price details
</div>
<div class="webSolutionDetails">
<h3>
Website Solution
</h3>
price details
</div>

和我的javascript

$(document).ready(function() {
$('#webSolution').onclick(function() {

    alert('webSolution');
    $('.webSolutionDetails').style.display = 'block';
    $('.mobileSolutionDetails').style.display = 'none';

});

$('#mobileSolution').onclick(function() {

    alert('Hey!');
    $('.mobileSolutionDetails').style.display = 'block';
    $('.webSolutionDetails').style.display = 'none';

});
});

任何帮助都会很棒

Answer 1

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>

您的脚本必须在jquery.min.js之后，否则在您尝试使用时不会定义$。您还缺少jQuery脚本标记中的结束>。

Answer 2

它不喜欢onclick。改为：

.on("click", function(){});

而不是

.onclick(function(){})

如果你想按自己的方式去做，你会想做

.click(function(){});

在类似的说明中，你的CSS标签对于jquery是错误的。

使用：

$(item).css({display:"block"}); //instead

这是一个小提琴。 http://jsfiddle.net/qMsm2/

Answer 3

jquery使用“click”作为函数。

http://api.jquery.com/click/

您应该像这样使用它：

$('#webSolution').click(function() {

});

检查这个小提琴：http://jsfiddle.net/4CNML/

Answer 4

两种方式来编写它。

使用.on（这似乎成为最受青睐的方式）

$('#mobileSolution').on('click', function() {
    alert('Hey!');
    $('.mobileSolutionDetails')..css({display: 'block'});
    $('.webSolutionDetails').css({display: 'none'});
});

或.click

$('#mobileSolution').click(function() {
    alert('Hey!');
    $('.mobileSolutionDetails').css({display: 'none'});
    $('.webSolutionDetails').css({display: 'none'});
});

此外，由于您使用jQuery，.style无效。像我上面那样使用.css。

Javascript，为什么我的onclick功能不起作用

4 个答案: