Question

我正在使用JQuery UI sortables进行调查界面。我基本上彼此相邻有大的ul列，代表你如何对你的选择进行排名（更喜欢剩下的，更喜欢更多是正确的）。您排名的选项显示为列内的较小li框，您可以根据您对事物进行排名的方式在每个列之间拖动它们。

我想要做的是更好地表明同一列中的选择是并列的。当你将元素拖到同一列时，我当前在页面正文中会显示一条消息，但很容易被忽略，所以我认为在列本身内的两个li元素之间加一点“或”会更好如果他们在同一列中彼此相邻。问题是我对JQuery，JavaScript，HTML很糟糕，并且无法想到如何做到这一点。有谁知道如何做到这一点？

以下是我的代码：

<style>
    ...
    .ui-state-highlight { height: 1.5em; line-height: 1.2em; background: rgb(186,228,229); border-color: rgb(195,195,195); }
    .ui-state-default { margin: 5px; padding: 5px; font-size: 1em; width: 120px; background: rgb(186,228,229); border-color: rgb(127,127,127); text-shadow: none; font-weight: normal; color: black; cursor: move;}
    .vote_col { min-height: 50px; list-style-type: none; margin: 1px; float: left; background: #eee; padding: 5px; width: 142px; text-shadow: -1px -1px white, 1px 1px white, 1px -1px white, -1px 1px white; font-weight: bold;}
    ...
</style>

<script>
    ...
    $( "ul.vote_col" ).sortable({
        connectWith: ".vote_col",
        placeholder: "ui-state-highlight",
        receive: function(event, ui) {
            // if this column already has an li inside of it
            if ($('#' + this.id + ' li').length > 1) {
                // display alert about ties
                document.getElementById('tie-warning').style.display='inline';
            }
        }
    });
    ...
</script>

<body>
    ...
    <ul id=sortable3 rank=3 class= "vote_col"  style="text-align:center;">
            <li class="ui-state-default" choice_id=115>Choice 1</li>
            <li class="ui-state-default" choice_id=114>Choice 2</li>
            <li class="ui-state-default" choice_id=117>Choice 3</li>
    </ul>
    <ul id=sortable2 rank=2 class= "vote_col"  style="text-align:center;">&nbsp</ul>
    <ul id=sortable1 rank=1 class= "vote_col"  style="text-align:center;">&nbsp</ul>
    ...
</body>

Answer 1

我不知道这是不是你的意思，但至少它是一个开始。请查看this JSFiddle的工作示例。

if ($('#' + this.id + ' li').length > 1) {

    current = $(this).children().first();
    $('<span>or</span>').insertAfter(current);

}

我已经使用jQuery来搜索您要放入的ul的第一个孩子，并插入＆＃34;或＆＃34;作为它后面的跨度。无论你添加了多少，每个第一个元素都会在它之后延伸。

如何在JQueryUI sortables之间动态显示文本？

1 个答案: