Question

我当前的代码需要3行代码才能为这些图表添加动画效果。有没有办法在一行代码中定义多个元素，像这样？我试图清理我的代码，让其他人更容易理解，而且杂乱越少越好。

$('#container1,container2,container3').addClass('animated zoomInDown');

＆＃13;

$(document).ready(function() {
    Highcharts.chart('container1', {
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            type: 'pie'
        },
        title: {
            text: 'What grade are you in?'
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                    style: {
                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                    }
                }
            }
        },
        series: [{
            name: 'Percentage',
            colorByPoint: true,
            data: [{
                name: '9th',
                y: 0
            }, {
                name: '10th',
                y: 16.7,
                sliced: true,
                selected: true
            }, {
                name: '11th',
                y: 25
            }, {
                name: '12th',
                y: 58.3
            }]
        }]
    });
});

＆＃13;

<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" />
<div id="container1" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
<script>
  $('#container1').addClass('animated zoomInDown');
</script>
<div id="container2" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
<script>
  $('#container2').addClass('animated zoomInDown');
</script>
<div id="container3" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
<script>
  $('#container3').addClass('animated zoomInDown');
</script>

＆＃13;

Answer 1

您可以为jQuery传递多个选择器以进行搜索，并且所有找到的元素将被放入一个＆＃34;包装的集合中。然后可以作为一组行动的元素。

但（当然）选择器必须正确：

$('#container1,container2,container3')

需要：

$('#container1,#container2,#container3')

甚至：

$('id^=container')

但是，重点是你必须记住旧的分配：＆＃34; Garbage in ... waste out。＆＃34;

Answer 2

$("#container1 ,#container2, #container3, #containerN").addClass('animated zoomInDown');

Answer 3

要选择ID为具有公共前缀的多个元素，请尝试以下方法：

$('[id^=container]')

然后使用addClass方法。

Answer 4

简单的JS示例：

myId

[...document.querySelectorAll('[id]')].forEach(el => el.classList.add('tomato'));

.tomato {
  color: tomato;
}

你能在一行代码中为多个元素添加一个类吗？

4 个答案: