Question

从今天早上起，我显示/隐藏特定div的功能不再起作用了。昨天一切都很好，我的代码似乎没有任何错误：

l2ace.js文件：

function showShop(id)
{
if(document.getElementById('paypal-form')){document.getElementById('paypal-form').style.display='none';}
if(document.getElementById('paysafecard-form')){document.getElementById('paysafecard-form').style.display='none';}
if(document.getElementById('allopass-form')){document.getElementById('allopass-form').style.display='none';}
if(document.getElementById(id)){document.getElementById(id).style.display='block';}
}

CSS：

#wrapper #shop-member #paypal-form {display:block;}
#wrapper #shop-member #paysafecard-form {display:none;}
#wrapper #shop-member #allopass-form {display:none;}

HTML：

<head>
<script type="text/javascript" src="js/l2ace.js"></script>
</head>

<div id="shop-member"><h1>Shop</h1>
  <a class="paypal" href="" onclick="showShop('paypal-form');return false;"></a>
  <a class="paysafecard" href="" onclick="showShop('paysafecard-form');return false;"></a>
  <a class="allopass" href="" onclick="showShop('allopass-form');return false;"></a>

  <div id="paypal-form"><form action="" method="post">a</form></div>
  <div id="paysafecard-form"><form action="" method="post">b</form></div>
  <div id="allopass-form"><form action="" method="post">c</form></div>
</div>

当我在“shop-member”div后面注入javascript函数时，一切都正常工作，但如果我从页眉中导入它则没有。不幸的是我不能把它放在div之后，或者我的滑块模块会以纯文本形式打印脚本，所以我真的需要让它在昨天的标题中工作。

以https://www.l2ace.com/用户名演示：测试密码：测试

单击按钮时，我们清楚地看到div的宽度发生变化，但内容不会改变。

Answer 1

将您的javascript放在<script></script>内，它永远不会在屏幕上打印。此外，如果您想从外部路径获取js代码，请使用：

<script type="text/javascript" src="resources/js/yourjs.js" ></script>

Answer 2

为什么不将该代码放在窗口加载事件中？

<script>
    window.addEvent('load', function () {
    new JCaption('img.caption');

    //Your function here
    function showShop(id) {
        if (document.getElementById('paypal-form')) {
            document.getElementById('paypal-form').style.display = 'none';
        }
        if (document.getElementById('paysafecard-form')) {
            document.getElementById('paysafecard-form').style.display = 'none';
        }
        if (document.getElementById('allopass-form')) {
            document.getElementById('allopass-form').style.display = 'none';
        }
        if (document.getElementById(id)) {
            document.getElementById(id).style.display = 'block';
        }
    }
});
</script>

或在$(document).ready(function(){/*code here*/});

内

Answer 3

您是否尝试将<script type="text/javascript" src="resources/js/l2ace.js"></script>放在标题滑块模块js之前？

Answer 4

我建议使用jQuery

<head>
<script type="text/javascript" src="js/l2ace.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
</head>

<div id="shop-member"><h1>Shop</h1>
  <a class="paypal" href="#">PayPal</a>
  <a class="paysafecard" href="#">PaySafecard</a>
  <a class="allopass" href="#">Allopass</a>

  <div id="paypal-form"><form action="" method="post">a</form></div>
  <div id="paysafecard-form"><form action="" method="post">b</form></div>
  <div id="allopass-form"><form action="" method="post">c</form></div>
</div>
<script type="text/javascript">
//onclick paypal class
$('.paypal').click(function(){
    $('#paypal-form').show();

    $('#paysafecard-form').hide();
    $('#allopass-form').hide();
});

$('.paysafecard').click(function(){
    $('#paysafecard-form').show();

    $('#paypal-form').hide();
    $('#allopass-form').hide();
});

$('.allopass').click(function(){
    $('#allopass-form').show();

    $('#paypal-form').hide();

    $('#paysafecard-form').hide();
});
</script>

JavaScript隐藏/显示div功能

4 个答案: