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

我有一个有两个按钮的网页。一个按钮应该打开一个div，上面写着“没有日期”。另一个应该打开一个div，上面写着“可用”

按钮1 HTML/脚本：

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

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

var toggle=函数（）{
var mydiv=document.getElementById（'nodate'）；
if（mydiv.style.display=='block'| | mydiv.style.display===''）
mydiv.style.display='none'；
其他的
mydiv.style.display='block'
}
您选择的日期下未列出任何预订。请选择其他日期或寻求帮助。

按钮2 HTML/脚本：

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

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

var toggle=函数（）{
var mydiv=document.getElementById（'nodate2'）；
if（mydiv.style.display=='block'| | mydiv.style.display===''）
mydiv.style.display='none'；
其他的
mydiv.style.display='block'
}
酷！我们已经预订了您选定的日期
您的姓名必须使用正确的格式，否则您将被重定向到此页面，直到使用正确的格式和保留的姓名。
&bull；第一及第二；最后
&bull；
第一及；姓氏的首字母必须大写
&bull；
第一个和第二个之间的单个空间；姓氏
例如：奥斯汀街区

---

问题是：当我启动页面时，两个隐藏的div中只有一个出现。两个按钮打开同一个按钮。所以基本上，我认为我需要将这两个脚本分开。我根本不会写Javscript（即使我上过几次课）。我尝试通过一个按钮向Javascript函数中添加一个“a”，但它拒绝工作。

尝试以下操作：

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

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

有一些方法可以使其自动化，但这应该是有效的

---

以前的问题是您正在重写现有函数。您需要创建一个单独的函数或向函数中添加一个参数。

您正在覆盖

toggle

方法，但还有其他更好的方法可以做到这一点。一种基于html的方法是这样的，您不必为每个html设置onclick

Html:

---

另一种方法是，在按钮上设置一个数据目标属性，指向目标div，并为它们添加一个类名，然后将事件附加到按钮，而不是附加onclick属性并执行检索目标的操作。

您可能会发现在jQuery中这样做更容易。首先，它是自动跨浏览器兼容的（无需手动调整以覆盖IE异常），而且打字更少。许多人也发现它通常更容易学习。是的

要使用jQuery，只需在文档中加载jQuery库，通常在

标记中，如下所示：

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

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

---

---

请仔细检查JSFIDLE HTML代码，因为我做了一些更改。请注意，您的

标记以及

标记不正确。

在

切换之前，请尝试删除
var
，您的代码中还有“智能引号”。智能引号是向左或向右倾斜的类型，通常由文字处理器输入。您需要用简单的ascii引号替换所有智能引号。
$('.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();
});