使用jQuery遍历ASP.NET应用程序中的一组Morris Donuts，并将文本移到外部

本文介绍了使用jQuery遍历ASP.NET应用程序中的一组Morris Donuts，并将文本移到外部的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

TL; DR:1.遍历Div中的所有甜甜圈. 2.在mouseOver上将标签文本移动到甜甜圈的外部.

TL;DR: 1. Iterate through all donuts within a Div. 2. Move label text outside the donut on mouseOver.

我遇到了此和使我半途而废，但我正在尝试遍历几个甜甜圈.我是jQuery的新手，我尝试了一些选项，但我并没有完全了解.

I came across this and this questions that got me half way there, but I am trying to iterate through several donuts. I'm new to jQuery and I've tried a few options, but I just don't have a complete understanding.

这是我的代码.任何帮助将不胜感激:

Here's my code. Any help would be appreciated:

HTML

    `<div class="dials">
<div class="row">
        <div class="col-md-4">
            <asp:Label ID="lblSurvey1" Text="" runat="server" CssClass="page-subheader" />
            <div id="divSurvey1"></div><span id="morrisDonutChartSpan"></span>
        </div>
        <div class="col-md-4">
            <asp:Label ID="lblSurvey2" Text="" runat="server" CssClass="page-subheader" />
            <div id="divSurvey2"></div><span id="morrisDonutChartSpan"></span>
        </div>
    </div>
</div>`

甜甜圈脚本:

Morris.Donut({
    element: 'divSurvey1',
    colors: ['#2299DE', '#97C240', '#2c594f', '#002D40', '#BC0D20', '#FF8922', '#f0b71e', '#9369d2'],
    labelColor: '#B5B5B5',
    resize: false,
    data: [
      <asp:Literal id="litSurvey1Data" runat="server"></asp:Literal>
]
});

Morris.Donut({
    element: 'divSurvey2',
    colors: ['#2299DE', '#97C240', '#2c594f', '#002D40', '#BC0D20', '#FF8922', '#f0b71e', '#9369d2'],
    labelColor: '#B5B5B5',
    resize: false,
    data: [
      <asp:Literal id="litSurvey2Data" runat="server"></asp:Literal>
]
});

    $( ".dial" ).mouseover(function() {
        prepareMorrisDonutChart();
    });

    $( document ).ready(function() {
        prepareMorrisDonutChart();
    });

    function prepareMorrisDonutChart() {
        $(".dial tspan:first").css("display","none");
        $(".dial tspan:nth-child(1)").css("font-size","40px");

        var isi = $(".dial tspan:first").html();
        $('.dial').text(isi);
    }

推荐答案

也许有些矫kill过正，但我确实可以使用.以为我会共享代码，让别人开心一下.

Maybe a bit overkill, but I got it to work. Thought I'd share the code and make someone happy out there lol.

HTML

<!DOCTYPE html>
<html>

<head>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://cdn.oesmith.co.uk/morris-0.4.1.min.js"></script>
    <meta charset=utf-8 />
    <title>Morris.js Donut Chart Example</title>
</head>

<body>
    <div ID="donut_holder"></div>
    <span id="morrisDonutSpan"></span>

    <div ID="donut_holder2"></div>
    <span id="morrisDonutSpan2"></span>

    <div ID="donut_holder3"></div>
    <span id="morrisDonutSpan3"></span>

</body>

</html>

JavaScript

    $(function() {

    var morrisElementArray = [
  {morrisElement: "donut_holder", morrisSpan: "morrisDonutSpan"},
  {morrisElement: "donut_holder2", morrisSpan: "morrisDonutSpan2"},
  {morrisElement: "donut_holder3", morrisSpan: "morrisDonutSpan3"}
        ];

Morris.Donut({
  element: 'donut_holder',
  data: [
    {label: "Download Sales", value: 12},
    {label: "In-Store Sales", value: 30},
    {label: "Mail-Order Sales", value: 20}
  ]
});

Morris.Donut({
  element: 'donut_holder2',
  data: [
    {label: "Download Sales", value: 12},
    {label: "In-Store Sales", value: 30},
    {label: "Mail-Order Sales", value: 20}
  ]
});

Morris.Donut({
  element: 'donut_holder3',
  data: [
    {label: "Download Sales", value: 12},
    {label: "In-Store Sales", value: 30},
    {label: "Mail-Order Sales", value: 20}
  ]
});


$(document).ready(function() {

    morrisElementArray.forEach(function(element, index) {

        prepareMorrisDonutChart(element.morrisElement, element.morrisSpan);
        $(this).mouseover(function() {
            prepareMorrisDonutChart(element.morrisElement, element.morrisSpan);
        });
    });
});


function prepareMorrisDonutChart(morrisEle, morrisSpa) {
    //hides description from donut
    $("#" + morrisEle + " tspan:first").css("display", "none");
    // increases number text size
    $("#" + morrisEle + " tspan:nth-child(1)").css("font-size", "40px");

    // gets html description from donut
    var isi = $("#" + morrisEle + " tspan:first").html();
    // assigns html description to span
    $("#" + morrisSpa).text(isi);
    }

});

这篇关于使用jQuery遍历ASP.NET应用程序中的一组Morris Donuts，并将文本移到外部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

1403页，肝出来的..