Question

我更像是一个HTML / CSS人，虽然我知道一些基本的Javascript，但我不确定如何编码我想看到的内容。我正在尝试在WordPress页面上执行此操作。

这是一个页面，显示加拿大某个省/地区的即将发生的事件，并在顶部有一个互动地图。

当用户点击地图上的某个省时，它会调用一个函数，该函数会在另一个“容器”DIV中加载唯一的DIV及其内容（以便将所有内容加载到同一位置）。每个省/地区的所有DIV都在同一页面上，因为WordPress安装在根目录中，并且不允许链接到页面（在同一域内）而不是它创建的页面。

    <div id="map">
    </div>


 <div id="scheduleBox">
// content will be loaded here 
    </div>

<!-- ==== DIV FOR BC EVENTS ===== -->
    <div id="bc">
    <div class="schedule_header">
    <h2>Upcoming Events for British Columbia</h2>
    </div>
    <table>
    <tbody>
    <tr><!-- TABLE HEADERS -->
    <td class="tableheader">Date</td>
    <td class="tableheader">Time</td>
    <td class="tableheader">City</td>
    <td class="tableheader">Venue</td>
    </tr>
    <tr><!-- EVENT #1 -->
    <td class="date">August 01, 2011</td>
    <td class="time">12:00 AM</td>
    <td class="city">Kelowna, BC</td>
    <td class="venue">Venue Name Here</td>
    </tr>
    <tr><!-- EVENT #2 -->
    <td class="date">August 01, 2011</td>
    <td class="time">12:00 AM</td>
    <td class="city">Kelowna, BC</td>
    <td class="venue">Venue Name Here</td>
    </tr>
    <tr>
    <td class="date">August 01, 2011</td>
    <td class="time">12:00 AM</td>
    <td class="city">Kelowna, BC</td>
    <td class="venue">Venue Name Here</td>
    </tr>
    </tbody>
    </table>
    </div>

 // Event listings for Alberta //

    <div id="ab">
    <div class="schedule_header">
    <h2>Upcoming Events for Alberta</h2>
    ....
    ...
    </div>
    </div>

由于WordPress的限制，当用户点击其他省份时，先前显示的内容将与新内容交换，而不会引用URL或HTML页面。它只是通过引用DIV id并加载其中的所有内容来抓取内容。

我尝试使用jQuery的append和AJAX函数来切换DIV，但似乎没有任何效果。我也查看了切换DIV的教程，但那些依赖于外部页面。

所以，我很茫然。我在下面提供了一些伪代码，显示了我想要发生的事情：

function loadbc() {    // function that loads events for British Columbia
#scheduleBox.hide;      // clear content from the container div if there is any.
#scheduleBox.show;
findDiv("#bc");
#scheduleBox.AddContent("#bc");  // inject the DIV for BC events, and its contents.
fadeIn("fast");
}

也许我过于复杂，或者遗漏了一些东西。无论如何，我非常欣赏一些启示。

Answer 1

首先，.hide()不会清除刚刚隐藏的内容。如果您想清除内容，请使用下一个方法

$('#scheduleBox').html('');

这将清除scheduleBox内的所有内容。

Answer 2

Demo

我会说这样的话：

$("#scheduleBox").children().remove();
$("#scheduleBox").hide();
$("#scheduleBox").append($("#bc"));
$("#scheduleBox").fadeIn("slow");

通过调用唯一函数加载/切换DIV（在WordPress页面上）

2 个答案:

Demo