javascript - 显示页面其他位置的 JavaScript 隐藏元素

Question

更新:我更改了 JavaScript 代码，现在在 iPhone 调试控制台中收到错误。

免责声明:我是 Web 开发新手，不太擅长 JavaScript。

场景:我正在使用 CodeIgniter 构建一个事件日历，并且我在移动设备上隐藏了事件发生时需要在页面其他位置显示的元素。被隐藏的元素是 <ul> s，并且当它们对应 <span> 时，需要将它们显示在页面的另一部分上与类(class) .day_listing_mobile被选中。我一直在使用不同的方法，但我几个小时都找不到解决方案，因为我在 jQuery/Ajax/JavaScript 领域并不强。

问题:需要什么方法才能隐藏<ul>当其相应的 <span> 时，它们将显示在页面的不同部分上s 被选择了吗？

JavaScript(已更新):

(function($) {
    var isMobile = (/iphone|ipad|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));  
    if (isMobile) {
        $('.event_list').hide(); // setting display:none; on all .event_list <ul> elements

        // attach click event to the <span class="day_listing"> elements
        $('.day_listing_mobile').click(function() {
            var eventList = $(this).sibling('.event_list').clone();
            $(this).sibling('.event_list').remove();
            $('#mobile_show_content').append(eventList);
        });
    }

})(jQuery);

我在这行代码中收到此错误 var $eventList = $(this).sibling('.event_list').clone(); :

CodeIgniter 日历模板( Controller ):

            {cal_cell_content}      
                <span class="day_listing_mobile">
                    {day}
                </span>
                <ul class="event_list">
                    {content}       
                </ul>
            {/cal_cell_content}

            {cal_cell_content_today}
                <span class="day_listing_mobile" id="today_listing">
                    {day}
                </span>
                <ul class="event_list">
                    {content}   
                </ul>
            {/cal_cell_content_today}

查看:

<div class="row">
    <div class="twelve columns">
        <?php echo $calendar; ?>
    </div>
</div>
<div class="show-on-phones">
    <div class="row">
        <div class="twelve columns" id="mobile_show_content">
           <!--I want the <ul>s to show up here-->  
        </div>
    </div>
</div>

请注意，CodeIgniter 日历类在上面生成，我想在其中显示 <ul> s。

Answer 1

只需修改您的 click 事件即可在 dom 周围移动数据。

  $('.day_listing_mobile').click(function() {
            var eventList = $(this).sibling('.event_list').clone();
            $(this).sibling('.event_list').remove();
            $('.mobile_show_content').append(eventList);
        });