Question

我有一个从MySQL DB中提取的任务列表，如下所示：

echo '<li>';
echo '<span><a id="'.$task_id.'" class="task">'.$task_name.'</a></span>';

echo '<input type="checkbox" class="favourite" name="favourite" id="'.$task_id.'" + '.$favouriteChecked.' "> '; 

echo '<img id="'.$task_id.'" class="delete-button" width="10px" src="images/close.svg" />';
echo '</li>';

echo '<form class="add-additional-info" id="'.$task_id.'+additionalinfo"autocomplete="off">';
echo '<input type="text" name="new-info" placeholder="Add extra info" />';
echo '</form>';

当有人点击class =“task”时，我将以下代码向下滑入一个新的文本框

function slide_task() {
            // On tap or hover, have a text box that slides down to enter extra information.
            var hiddenContent = $( ".add-additional-info" );

            $('.task').click(function() {
                    event.preventDefault();
                     if (hiddenContent.is( ":visible" )){
                        hiddenContent.slideUp( 600 );
                    } else {
                        hiddenContent.slideDown( 600 );
                    }

            });

指向以下CSS的链接

.add-additional-info{
    margin-top: 20px;
    padding-bottom: 60px;
    display: none;
}

.add-additional-info input[type='text'] {
    width: 100%;
    font: normal 1.2em 'Raleway', Arial, sans-serif;
    color: #999;
    box-shadow: 2px 2px 0px #ddd;
    border: none;
    border-radius: none;
    display: block;
    padding: 12px 6%;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

当前代码所做的是SlideDown每个“任务”类下的文本框。我想要发生的只是让它在已被点击的“任务”下滑动。

我还需要能够将输入到文本框中的信息提交给MySQL数据库 - 我认为能够为每个任务使用唯一标识符（ID？）将解决这两个问题。也许使用“'。$ task_id。'+ additionalinfo”？

我知道某处有一个简单的解决方案，但我不应该去哪里。

编辑：清理代码并为每个add-additonal-info

添加唯一ID

Answer 1

要将下一个.add-additional-info向下滑动到您应该执行的加密li的父.task。

        $('.task').click(function(e) {
                e.preventDefault();
                $(this).closest("li").nextUntil(".add-additional-info").slideToggle(600);

        });

closest()向上遍历并返回第一个li，nextUntil()将获得下一个.add-additional-info元素，slideToggle将向上或向下滑动，无论需要什么。

Answer 2

您只需将幻灯片效果应用于直接位于所单击任务下方的表单。现在，你将它应用于所有这些。根据您的HTML，您可以将您的点击功能修改为：

function slide_task() {
        // On tap or hover, have a text box that slides down to enter extra information.
        $('.task').click(function() {
                event.preventDefault();
                var hiddenContent = $(this).parent().parent().next();
                 if (hiddenContent.is( ":visible" )){
                    hiddenContent.slideUp( 600 );
                } else {
                    hiddenContent.slideDown( 600 );
                }

        });

$(this).parent().parent().next()从.task链接移动到跨度，移动到li，然后移动到直接跟在li后面的元素，这是您的.add-additional-info表单。此解决方案完全依赖于您的HTML结构，如果更改，它将会中断。

选择一个项目向下滑动

2 个答案: