0

[更新] 它仅适用于 Firefox,不适用于 Chrome 或 Safari。我正在关注一个jQuery 教程 (AHAH),但是当我点击花朵时,描述并没有出现在“显示更多”部分。

在此处输入图像描述 $(文档).ready(函数(e) {

var $flowers = $('#flower-items');

$('#flower-items').find('a').on('click', function(e){
    e.preventDefault();

    var $desc = $('#flower-description');

    switch($(this).attr('href')) {
        case 'calla.html' :
            $desc.load('fragments/lilies.html');
            break;
        case 'sunflowers.html' :
            $desc.load('fragments/sunflower.html');
            break;
        case 'iris.html' :
            $desc.load('fragments/irises.html');
            break;
        case 'alstromeria.html' :
            $desc.load('fragments/peruvian.html');
            break;
    }

这是文件夹结构: 在此处输入图像描述

在此处输入图像描述

4

1 回答 1

1

这在 Chrome 中对我有用:

<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.min.js"></script>

<ul id="flower-items">
    <li><a href="calla.html">Flower 1</a></li>
    <li><a href="sunflowers.html">Flower 2</a></li>
    <li><a href="iris.html">Flower 3</a></li>
    <li><a href="alstromeria.html">Flower 4</a></li>
    <li><a href="5.html">Flower 5</a></li>
    <li><a href="6.html">Flower 6</a></li>
    <li><a href="7.html">Flower 7</a></li>
</ul>

<div id="flower-description">Flower Description</div>



<script type="text/javascript">
$(document).ready(function(){

    var $flowers = $('#flower-items');

    $('#flower-items').find('a').on('click', function(e){
        alert('a');
        e.preventDefault();

        var $desc = $('#flower-description');

        switch($(this).attr('href')) {
            case 'calla.html' :
                alert('b')
                $desc.load('fragments/lilies.html');
                break;
            case 'sunflowers.html' :
                $desc.load('fragments/sunflower.html');
                break;
            case 'iris.html' :
                $desc.load('fragments/irises.html');
                break;
            case 'alstromeria.html' :
                $desc.load('fragments/peruvian.html');
                break;
        }
    })

})
</script>

您应该在控制台中看到:

在此处输入图像描述

于 2016-02-24T03:50:53.203 回答