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

Question

Returning to JavaScript after a long break and I can't get this to work. I must be doing thing really stupid because it works fine with an onclick('') attached to the button in the HTML file just not when I try and do it in the script.js

I've tried to include everything that should be needed but if i've missed something let me know.

<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>

and my 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';

});
});

Any help would be great

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>

Your script must come after jquery.min.js , otherwise $ won't be defined when you try to use it. You're also missing the end > in the jQuery script tag.

Answer 2

It doesnt like onclick for one. Changed to:

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

instead of

.onclick(function(){})

if you wanted to do it your way, you would want to do

.click(function(){});

on a similar note, your CSS tags are wrong for jquery.

use:

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

Here is a fiddle. http://jsfiddle.net/qMsm2/

Answer 3

jquery uses "click" as function.

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

You should use it like this:

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

});

Check this fiddle: http://jsfiddle.net/4CNML/

Answer 4

Two ways for you to write it.

With .on (this is becoming the most favored way it seems)

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

or with .click

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

Also, since your using jQuery the .style is invalid. Use .css like I did above.