Javascript重叠-如何修复切换的显示/隐藏div

Question

I have a webpage with two buttons on it. One button SHOULD open a div that says 'no dates'. The other SHOULD open a div that says 'available.'

Button 1 HTML/Script:

<script>
var toggle = function() {
var mydiv = document.getElementById('nodate');
if (mydiv.style.display === 'block' || mydiv.style.display === '')
mydiv.style.display = 'none';
else
mydiv.style.display = 'block'
}
</script>

<div id="nodate" style="display:none"><span class="A"> <input type="image" src="http://www.weebly.com/uploads/1/6/7/6/16768236/custom_themes/307429121386408805/files/close-icon.png?1384992227202" width="42" onclick="toggle();" /></span><b>There are no reservations listed under the date you selected. </b>Please select another date or ask for assistance.<br><br><image src=”http://www.weebly.com/uploads/1/6/7/6/16768236/custom_themes/307429121386408805/files/sorry.jpg?1384992565622” width=”200”/></div>
<input type="submit" style="background-color: #fff; padding: 4px; border: solid 2px #000; cursor:pointer;" value="Friday November 22nd, 2013" onclick="toggle();" class=”days1”></input>
<br><br>

Button 2 HTML/Script:

<script>
var toggle = function() {
var mydiv = document.getElementById('nodate2');
if (mydiv.style.display === 'block' || mydiv.style.display === '')
mydiv.style.display = 'none';
else
mydiv.style.display = 'block'
}
</script>

<div id="nodate2" style="display:none"><span class="A"> <input type="image" src="http://www.weebly.com/uploads/1/6/7/6/16768236/custom_themes/307429121386408805/files/close-icon.png?1384992227202" width="42" onclick="toggle();" /></span><b>Cool! We’ve got reservations for the date you selected. </b><br><u>Your name must use a proper format or you will be redirected to this page until a correct format and reserved name are used.</u><ul><li>&bull; Both First &amp; Last</li><li>&bull;
 First &amp; Last name must have first letter capitalized</li><li>&bull;
 Single space between first &amp; last name</li></ul>Ex: Austin Block

<br><br><image img style="border:2px solid #000" src=”http://www.weebly.com/uploads/1/6/7/6/16768236/custom_themes/307429121386408805/files/reservations2.jpg?1385069953644” width=”200”/></div>
<input type="submit" style="background-color: #fff; padding: 4px; border: solid 2px #000; cursor:pointer;" value="Saturday November 23rd, 2013" onclick="toggle();" class=”days1”></input>

The problem: When I launch the page, only one of the two hidden divs shows up. Both buttons open the SAME one. So basically, I think I need to separate the two scripts. I cannot do Javscript at all (even though went to a class several times). I tried adding an 'a' to the Javascript function across one button, but it refused to work.

Answer 1

Try something like this:

<script>
    function toggleButton(elementID) {
        var mydiv = document.getElementById(elementID);
        if (mydiv.style.display === 'block' || mydiv.style.display === '')
            mydiv.style.display = 'none';
        else
        mydiv.style.display = 'block'
    }
</script>

Then on the input:

onclick="toggle('elementID');"

There are ways to automate it, but this should be effective.

The problem before is that you were overriding the existing function. You either need to create a separate function or add an argument to the function.

Answer 2

You are overwriting toggle method, But there are other better ways you can do this. One way you can do it based on your html is like this, you do not have to set up an onclick for each of them.

Html:

<input type="image" src="http://www.weebly.com/uploads/1/6/7/6/16768236/custom_themes/307429121386408805/files/close-icon.png?1384992227202" width="42" onclick="collapse.call(this);" />

and

 <input type="submit" style="background-color: #fff; padding: 4px; border: solid 2px #000; cursor:pointer;" value="Friday November 22nd, 2013" onclick="toggle.call(this);" class="days1"></input>

JS:

var toggle = function () {
    var mydiv =this.previousElementSibling;
    mydiv.style.display = (mydiv.style.display || 'block') === "block" ? 'none' :'block'
}
var collapse = function(){
    this.parentElement.parentElement.style.display = 'none';
}

Demo

Another way which would be that set up a data-target attribute on your buttons to point to the target divs, and add a class name for them, and then attach an event to the buttons rather that attaching onclick attribute and perform the operation retrieving your targets.

Answer 3

You might find this easier to do in jQuery. For one, it's automatically cross-browser compatible (no manual adjustments to cover off IE abnormalities), and it's much less typing. Many people also find it generally easier to learn. I did.

To use jQuery, you just need to load the jQuery library in your document, usually in the <head> tags, like this:

<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<head>

---

jsFiddle demo here

Here is what your jQuery code would look like:

$('.days1').click(function() {
    var v = $(this).val();
    if (v.substr(0,3)=='Fri'){
        $('#nodate2').hide();
        $('#nodate').show();
    }else if (v.substr(0,3)=='Sat') {
        $('#nodate2').show();
        $('#nodate').hide();
    }
});

$('img').click(function() {
    // $(this) refers to whatever was clicked on, one of the img tags
    // .parent() is the div tag above this img tag
    $(this).parent().toggle();
});

---

Please examine the jsFiddle HTML code closely, as I made a number of changes. Note that your <img> tags were not correct, as well as the <input> tags.