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

我有一个网页，上面有两个按钮。一个按钮应该打开一个写着"没有日期"的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>

按钮2 HTML/脚本：

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

问题是：当我启动页面时，两个隐藏的div中只有一个显示。两个按钮都打开同一个。所以基本上，我认为我需要将两个脚本分开。我根本不会写Javscript（尽管我上过几次课）。我试着通过一个按钮在Javascript函数中添加一个"a"，但它不起作用

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

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);" />

和

 <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';
}

演示

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

试试这样的东西：

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

然后输入：

onclick="toggle('elementID');"

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

之前的问题是您正在覆盖现有的函数。您需要创建一个单独的函数，或者向函数添加一个参数。

您可能会发现在jQuery中更容易做到这一点。首先，它是自动跨浏览器兼容的（没有手动调整来掩盖IE异常），而且打字也少得多。许多人也发现它通常更容易学习。我做到了。

要使用jQuery，您只需要在文档中加载jQuery库，通常在<head>标记中，如下所示：

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

jsFiddle演示在这里

以下是您的jQuery代码的样子：

$('.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();
});

请仔细检查jsFiddle HTML代码，因为我做了一些更改。请注意，您的<img>标记和<input>标记都不正确。

相关内容

最新更新

热门标签：