Question

我有一个基本的决策树。它具有一个“答案”字段和一个“消息”字段。我无法使用其ID在“消息”区域中显示JavaScript。

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link href="~/Content/styles.css" type="text/css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-3.1.1.js"></script>
<script src="~/Scripts/tree.js"></script>
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<title>Test Tree</title>


<style>

    a {
        color: #ffffff;            
    }

    a:hover {
        color: #ffffff;
        text-decoration: none;
        cursor: pointer;
    }

    body {
        font: 'Gotham Book', Gotham-Book, Arial, sans-serif;
        background-color: #f2f2f2;
    }


    h1 {
        margin: 40px auto 5px auto;
        text-align: center;
    }
    .dc-tree {
        font: 16px 'Roboto',Verdana, sans-serif;
        position: relative;
        text-align: center;
        background-color: #f2f2f2;
        height: 50%;
        overflow: hidden;
    }

    .dc-tree * {
        box-sizing: border-box;
    }

    .dctree-card {
        text-align: center;
        padding: 0px;
        position: absolute;
        margin: 0 auto;
        background-color: #f2f2f2;
        display: none;
    }

    .dctree-message {
        padding: 10px;
        margin-bottom: 20px;            
        font-size: 1.5em;
    }

    [class^="dctree-answer"] {
        padding: 20px;
        /*added height 10vh to auto-align boxes*/
        height: 10vh;            
        text-align: center justify;
        margin: 15px 120px;
        box-shadow: 3px 3px 5px 2px #BDBDBD;
        /*position: fixed;*/
        /*text-shadow: 1px 1px 2px black;*/
    }

    .darkBlue {
        background-color: #003E69;
        color: white;
    }

    .softBlack {
        background-color: #333333;
        color: white;
    }

    .lightGrey {
        background-color: #808080;
        color: white;
    }

    .teal {
        background-color: #38939b;
        color: white;
    }

    .green {
        background-color: #5E9732;
        color: white;
    }

    .orange {
        background-color: #F47B20;
        color: white;
    }

    .footer {
        font: 'Gotham Book', Gotham-Book, Arial, sans-serif;
        position: fixed;
        left: 0;
        bottom: 80px;
        width: 100%;
        background-color: #f2f2f2;
        color: black;
        text-align: center;
        font-size: 16px;
        padding: 5px;
        /*text-decoration: underline;*/
    }

</style>

<script>
    (function ($) {
        var settings;
        var currentCard;
        var prevCard = [];

        // Plugin definition.
        $.fn.decisionTree = function (options) {
            var elem = $(this);
            settings = $.extend({}, $.fn.decisionTree.defaults, options);

            elem.addClass(settings.containerClass);
            renderRecursive(settings.data, elem, "dctree-first");

            $('.dctree-prev').on('click', function () {
                showCard(prevCard.pop(), true);
            });

            currentCard = $('#dctree-first');
            currentCard.show();
        };


        $.fn.decisionTree.defaults = {
            data: null,
            animationSpeed: "fast",
            animation: "slide-left",
            containerClass: "dc-tree",
            cardClass: "dctree-card",
            messageClass: "dctree-message"
        };


        function renderRecursive(data, elem, id) {
            var container = $('<div></div>')
                .addClass(settings.cardClass)
                .addClass('col-xs-12');
            var message = $('<div></div>').addClass(settings.messageClass).append(data.message);                
            message.append('<a href="#"></a>');                
            message.append('<div id="heading"></div>');
            container.append(message);

            if (id != null) {
                container.attr('id', id)
            }

            if (typeof data.decisions != "undefined") {
                var decisions = $('<div></div>').addClass('dctree-decisions');
                for (var i = 0; data.decisions.length > i; i++) {
                    var decision = data.decisions[i];
                    var genId = guid();
                    var grid = $('<div></div>').addClass('col-md-6');
                    var answer = $('<div></div>')
                        .addClass("dctree-answer-" + i)
                        .append(decision.answer, '<a href="#"></a>')
                        .on('click', function () {
                            getNextCard(this);
                        })
                        .attr('data-dctree-targetid', genId);
                    if (typeof decision.class != "undefined") {
                        answer.addClass(decision.class);
                    }
                    grid.append(answer);
                    decisions.append(grid);
                    renderRecursive(decision, elem, genId);
                }
                container.append(decisions);
            }


            if (id != 'dctree-first') {
                var controls = $('<div></div>').addClass('dctree-controls col-md-12');
                controls.append($('<a href="javascript:;" class="dctree-prev" style="color:black;">< Back</a>'));
                container.append(controls);
            }

            elem.append(container);

            $('.dctree-message').click(function () { console.log("Hi"); })
        }

        function getNextCard(elem) {
            var e = $(elem);
            currentCard = e.parents('.' + settings.cardClass)[0];
            prevCard.push(currentCard.id);
            var nextCard = e.attr('data-dctree-targetid');
            showCard(nextCard);
        }

        function showCard(id, backward) {
            var nextCard = $("#" + id);

            if (settings.animation == 'slide') {
                $(currentCard).slideUp(settings.animationSpeed, function () {
                    nextCard.slideDown(settings.animationSpeed);
                });
            } else if (settings.animation == 'fade') {
                $(currentCard).fadeOut(settings.animationSpeed, function () {
                    nextCard.fadeIn(settings.animationSpeed);
                });
            } else if (settings.animation == 'slide-left') {
                var left = { left: "-100%" };
                var card = $(currentCard);

                if (backward) {
                    left = { left: "100%" };
                }
                card.animate(left, settings.animationSpeed, function () {
                    card.hide();
                });

                if (nextCard.css('left') == "-100%" || nextCard.css('left') == "100%") {
                    left.left = 0;
                    nextCard.show().animate(left, settings.animationSpeed);
                } else {
                    nextCard.fadeIn(settings.animationSpeed);
                }
            }

            currentCard = nextCard;
        }

        function guid() {
            return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
                var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
                return v.toString(16);
            });
        }

        // End of closure.
    })(jQuery);


</script>

<script>
    var newURL = window.location.protocol + "//" + window.location.host + "/" + window.location.pathname;
    if (a.indexOf('html') > -1) { //Check of html String in URL.
        url = url.substring(0, newURL.lastIndexOf("."));
    }    

    //Gets current date and subtracts 7 days. This is to check whether the decision is 7 days prior to today's date.
    var d = new Date();
    d.setDate(d.getDate() - 7);
    document.getElementById('heading').innerHTML = "I bought it " + (d.getMonth() + 1) + "/" + d.getDate() + "/" + d.getFullYear() + "?";     </script>

<div class="jquery-script-center">
    <div class="jquery-script-clear"></div>
</div>
<!--</div>-->
<h1>Dolls</h1>
<div class="main"></div>
<script type="text/javascript">
    var data = {
        message: "<div style='color:black;'>Are you buying a doll?</div>",
        decisions: [{                    
                    answer: "ACH",
                    class: "green",
                    message: "<div id='heading'></div>",
                    decisions: [{
                        answer: "I love it",
                        class: "orange",
                        message: "It's my favorite"
                    },
                    {
                        answer: "I don't like it",
                        class: "green",
                        message: "It's not my favorite"

                    },
                    ]
                },
                ]
            },
            ]
        },
        ]
    };

    $(document).ready(function () {
        $('.main').decisionTree({
            data: data
        });
    });

我的意图是，对于具有id = heading的消息，我希望它显示日期的JavaScript。但是，当我尝试在浏览器中启动它时，它拒绝显示。有人可以帮我解决我可能做错的事情吗？谢谢！

Answer 1

似乎变量“数据”对象中的括号过多。

Answer 2

我认为您的标题div不存在，当您的脚本最初运行时...所有脚本都在$(document).ready之前加载，因此添加了“标题” div 。作为测试，我将日期/时间代码放入函数中，并在 $('.main').decisionTree声明，我认为它按预期工作。

function lateBinder(){    
    var d = new Date();
    d.setDate(d.getDate() - 7);
    document.getElementById('heading').innerHTML = "I bought it " + (d.getMonth() + 1) + "/" + d.getDate() + "/" + d.getFullYear() + "?";
}

$(document).ready(function () {
        $('.main').decisionTree({
            data: data
        });

        lateBinder();
    });

无法显示div ID

2 个答案: