问题描述

Question

问题描述

我希望我的网站在点击我的元素时显示情节。

问题是 - 我有4个地方和3个间隔。那是4 * 3 = 12个地块：

var places = ['place1','place2','place3','place4']
var interval = [1,2,3]

对于每个区间我都有一个单独的数组阵列，分别为每个位置保存样本

samples1[]
samples2[]
samples3[]

samples1[0]表示interval=1＆＃34; {/ p>的place1个样本列表

samples1[1]表示interval=1＆＃34;的place2个样本列表等。

情节本身如下：

<div id="plot-place1">
    <div class = interval-button id = "interval1">interval1</div>
    <div class = interval-button id = "interval2">interval2</div>
    <div class = interval-button id = "interval3">interval3</div>
    <div id = "place1"><!-- Plotly chart will be drawn inside this DIV --></div>
</div>

显示指定地点默认情节的功能如下所示：

/* Shows plot's container (div) for place1, interval=1 */

$(document).ready(function(){
    $(this).on('click', '.place1', function(){
        $('#plot-place1').fadeToggle('fast');
        showPlot(samples1[0], 'place1');
    });
});

然后我有一个函数，在单击间隔按钮后，更改单个图以显示指定的间隔：

$(document).ready(function(){
    $('#plot-place1').on('click', '#interval2', function(){
        showPlot(samples1[3], 'sypialnia');
    });
});

因此，对于12个图，我有12个相同的函数，它们改变了图的间隔，并且仅与参数不同。我还有4个几乎相同的功能来显示指定地点的情节。

这看起来很重要！我想摆脱冗余，但我是jQuery的新手，我知道，应该有类似java模板功能的东西，但我不知道从哪里开始。

用于此的Hypotetical模板将是：

/* shows plot's container (div)*/
$(document).ready(function(){
    $(this).on('click', <plot's_place-based_id> , function(){
        $(<plot_container_id>).fadeToggle('fast');
        showPlot(<array_of_samples>, <place>);
    });
});

/* shows specified plot */
$(document).ready(function(){
    $(<plot_container_id>).on('click', <interval_button_id>, function(){
        showPlot(<array_of_samples>, <place>);
    });
});

问题

如何摆脱冗余？
理解这个问题是否清楚？
我是如何搞砸的？

Answer 1

不要使用ID来重复这样的模块...使用普通类。

您还可以使用数据属性或索引来帮助激活哪个按钮

有2个重复模块的示例：

var intervals = {
  'place1': [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
  ],
  'place2': [
    [11, 12, 13],
    [14, 15, 16],
    [17, 18, 19]
  ]
}

function showPlot($el, place, plotIndex) {
  // display place and interval array for demo
  $el.html(place + ' - ' + JSON.stringify(intervals[place][plotIndex]))
}

$('.interval-button').click(function() {
  // isolate place instance container based on `this`
  var $cont = $(this).closest('.plot-place'),
    place = $cont.data('place'),
    plotIndex = $cont.find('.interval-button').index(this),
    $plotEl = $cont.find('.place')
  showPlot($plotEl, place, plotIndex)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="plot-place" data-place="place1">
  <h4>Place 1</h4>
  <button class="interval-button">interval1</button>
  <button class="interval-button">interval2</button>
  <button class="interval-button">interval3</button>
  <div class="place"></div>
</div>

<div class="plot-place" data-place="place2">
  <h4>Place 2</h4>
  <button class="interval-button">interval1</button>
  <button class="interval-button">interval2</button>
  <button class="interval-button">interval3</button>
  <div class="place">
    <!-- Plotly chart will be drawn inside this DIV -->
  </div>
</div>

摆脱jQuery代码冗余，它只与参数

问题描述

问题

1 个答案: