Question

我有一段javascript，允许选择多个选项。 html的一个例子是：

选择一个选项：

<br><br>

<div id="dialogue_container"> </div>
<div id="Append"> And then this happens.</div>          

<div class="inlinechoice-0" id="0">
    <a class="question" id="1">Choice 1</a><br>
    <a class="question" id="2">Choice 2</a><br>
    <a class="question" id="3">Choice 3</a>
</div>

<div class="answer-1">
    You picked 1.  
    <div class="inlinechoice-1" id="1">
        <a class="question" id="4">Choice 4</a><br>
        <a class="question" id="5">Choice 5</a><br>
    </div>
</div>
<div class="answer-2">
    You picked 2. 
</div>
<div class="answer-3">
    You picked 3. 
</div>
<div class="answer-4">
    You picked 4. 
    <div class="inlinechoice-2" id="2">
        <a class="question" id="6">Choice 6</a><br>
        <a class="question" id="2">Choice 7 (2)</a><br>
    </div>
</div>
<div class="answer-5">
    You picked 5. 
</div>
<div class="answer-6">
    You picked 6. 
</div>
<br><br>

<FORM>
    <INPUT TYPE="button" onClick="history.go(0)" VALUE="Refresh">
</FORM>

然后我在这里有一些javascript：

$('div[class*=inlinechoice').on('click','.question', function(e) {
    var $this = $(this),
    $id = $this.prop('id');

    $("#dialogue_container").append($('.answer-' + $id).contents());
});

$('div[class*=inlinechoice').on('click', function(a) {
    var $this = $(this),
    $cid = $this.prop('id');

    $('.inlinechoice-' + $cid).hide();

});

然后是一点点CSS：

div[class*='inlinechoice-'] { cursor: pointer; }

div[class*='answer-'] {display:none}

div[class*='append']{display:none}

它的工作方式是所有的inlinechoice / recoerclass / append类都以隐藏的方式开始。当用户单击选项时，javascript会按照选择的顺序将相应的答案放入dialog_container div中。但是，我想添加最后的触摸，这是为了在用户没有更多选择时显示附加div的内容。我需要检查dialog_container的内容，看看是否有任何有效的内联选择（即非隐藏的内联），如果没有，那么我可以设置append div显示。我认为解决方案将类似于建议here，但我不确定如何将其应用于对话容器的内容，因为它们是动态的。

感谢。

Codepen here

编辑：新的Codepen here。我已经将以下代码添加到第一个问题onclick事件中，并且它正确地附加到没有嵌套选项（即选项2和3）的选项中，而不是选择1（其他问题）。我想而不是搜索#dialogue_container的全部内容，我只需要查看最后一个选择#answer的内容，但是，这证明有点棘手。

    $foo = $("#dialogue_container").append($('.answer-' + $id).contents());

            $str = $foo.html();

            $term = "question";
            $index = $str.indexOf($term);
            if($index != -1){
            //Do Nothing
            }
            else{
            $('#append').show();
            }

编辑：这是否有特殊原因：

        $foo = $("#dialogue_container").append($('.answer-' + $id).contents());

但这不是吗？

        $('.answer-' + $id).contents();

我猜这与使用.contents（）结合一个类而不是一个div有关，但我不知道如何指示脚本只返回最后点击的答案类的内容。 / p>

如果我添加以下内容，我可以收到警告以返回正确的内容，但我不想像这样硬编码answer-id类：

  alert($('[class*="answer-2"]').eq(0).html());

我试过了：

  alert($('[class*="answer-"]' + $id).eq(0).html());

尝试选择正确的答案类，但它不会返回任何内容。我觉得我差不多就这么做了，但并不完全！

编辑：感谢一点澄清here，我终于弄明白了！我将在下面添加答案。

Answer 1

在 attribute selector

中遗漏]

$('div[class*=inlinechoice]').on('click', '.question', function(e) {
    //               -----^-----
    var $this = $(this),
            $id = $this.prop('id');
    $("#dialogue_container").append($('.answer-' + $id).contents());
});
$('div[class*=inlinechoice]').on('click', function(a) {
    //               -----^-----
    var $this = $(this),
            $cid = $this.prop('id');
    $('.inlinechoice-' + $cid).hide();
});

CODEPEN

Answer 2

事实证明，我称之为事物的顺序很重要（你认为我现在能够想出这样的事情）。

在$ id变量定义之后立即将以下内容添加到javascript中似乎已经完成了这个诀窍：

    //This is the append code which adds the contents of the append div when there are no more choices.
    $str = $('.answer-' + $id).html();
    $index = $str.indexOf("question");

    if ($index != -1) {
        //Do Nothing
    } else {
    $('#append').show();
    }

Codepen

检查div.contents（）是否存在另一个div

2 个答案: