如何将Javascript消息变成超链接？

时间：2018-04-09 12:47:55

标签： javascript jquery html

下面，我正在使用此代码：

使用Javascript：

(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);
    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)
                .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">< Back</a>'));
        container.append(controls);
    }

    elem.append(container);
}

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 );

这是我的索引页面：

<html>

  <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="../css/styles.css" type="text/css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-3.1.1.js"></script>
<script src="../js/tree.js"></script>
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<title>Test Tree</title>

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

  h1 {
    margin: 150px auto 50px auto;
    text-align: center;
  }

</style>


<div class="jquery-script-center">

  <div class="jquery-script-ads">
    <script type="text/javascript">


    </script>
    <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">


    </script>
  </div>
  <div class="jquery-script-clear"></div>
</div>
</div>
<h1>Test Tree</h1>
<div class="main"></div>
<script type="text/javascript">
  var data = {
    message: "<div style='color:black;'>What are we doing for the customer?
</div>",
    decisions: [{
        answer: "Open a new checking account.",
        class: "green",
        message: "Will there be a charge?",
        decisions: [{
            answer: "Yes",
            class: "green",
            message: "Form 1"
          },
          {
            answer: "No",
            class: "darkBlue",
            message: "Form 2"
          },
          {
            answer: "Special Case",
            class: "softBlack",
            message: "Form 3"
          },              
        ]
      },         
    ]
  };

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

</script>


<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-36251023-1']);
  _gaq.push(['_setDomainName', 'jqueryscript.net']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script');
    ga.type = 'text/javascript';
    ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(ga, s);
  })();

</script>

我的问题是：在通过决策树时，如何才能将“消息”变为链接？在上面的示例中，“消息”是：表单1，表单2和表单3.我希望这些链接到单独的网页，最好在新窗口中打开。

1 个答案:

答案 0 :(得分：1)

使用.wrapInner()将您的文字包裹在<a>标记

中
  

.wrapInner（）函数可以接受任何可能的字符串或对象   传递给$（）工厂函数以指定DOM结构。这个   结构可以嵌套几层深，但应该只包含   一个最重要的元素。结构将围绕内容   匹配元素集中的每个元素。

在container.append(message);之前添加：

message.wrapInner('<a href="#"></a>');


(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.wrapInner('<a href="#"></a>'); // this will wrap your message with <a></a> 

    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)
          .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">< Back</a>'));
      container.append(controls);
    }

    elem.append(container);

  }

  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);

var data = {
  message: "<div style='color:black;'>What are we doing for the customer?</div>",
  decisions: [{
    answer: "Open a new checking account.",
    class: "green",
    message: "Will there be a charge?",
    decisions: [{
        answer: "Yes",
        class: "green",
        message: "Form 1"
      },
      {
        answer: "No",
        class: "darkBlue",
        message: "Form 2"
      },
      {
        answer: "Special Case",
        class: "softBlack",
        message: "Form 3"
      },
    ]
  }, ]
};

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


var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36251023-1']);
_gaq.push(['_setDomainName', 'jqueryscript.net']);
_gaq.push(['_trackPageview']);

(function() {
  var ga = document.createElement('script');
  ga.type = 'text/javascript';
  ga.async = true;
  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(ga, s);
})();
body {
  font: 'Gotham Book', Gotham-Book, Arial, sans-serif;
  background-color: #f2f2f2;
}

h1 {
  margin: 150px auto 50px auto;
  text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="jquery-script-center">

  <div class="jquery-script-ads">
    <script type="text/javascript">
    </script>
    <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
    </script>
  </div>
  <div class="jquery-script-clear"></div>
</div>

<h1>Test Tree</h1>
<div class="main"></div>

相关问题
最新问题