Question

我目前有一种同位素，当我点击一个按钮时，它会显示以下菜单。我有大约二十个选项。我想将它们更改为对象，以便我可以重用代码并使其更容易维护。我在对象编程方面相当新。这是我现在想要改变的代码：

$(document).ready(function(){

  $("#btn0").click(function(){
    $("#difficulty_plan_display").html("<br><h5 id='filter3-checker'>Cars Matching your Experience:</h5><button class='button' data-filter-value='*'>show all</button><button class='button' data-filter-value='.model'>Models</button><button class='button is-checked' data-filter-value='.stitch-and-glue'>Stitch and Glue</button><button class='button' data-filter-value='.hybrid'>Hybrids</button><br><br><h5 id='filter4-checker'>Ways to Build:</h5><button class='button' data-filter-value='*'>show all</button><button class='button is-checked' data-filter-value='.kit'>Complete Kits</button><button class='button' data-filter-value='.part'>Wood Parts Only Kit</button><button class='button' data-filter-value='.form'>Forms Kit</button><button class='button' data-filter-value='.plan'>Plans &amp; Manual Only</button><br>");
  });

  $("#btn1").click(function(){
    $("#difficulty_plan_display").html("<br><h5 id='filter3-checker'>Cars matching your Experience:</h5><button class='button' data-filter-value='*'>show all</button><button class='button' data-filter-value='.model'>Models</button><button class='button is-checked' data-filter-value='.stitch-and-glue'>Stitch and Glue</button><br><br><h5 id='filter4-checker'>Ways to Build:</h5><button class='button' data-filter-value='*'>show all</button><button class='button is-checked' data-filter-value='.kit'>Complete Kits</button><br>");
  });

  $("#btn2").click(function(){
    $("#difficulty_plan_display").html("<br><h5 id='filter3-checker'>Cars Matching your Experience:</h5><button class='button' data-filter-value='*'>show all</button><button class='button' data-filter-value='.model'>Models</button><button class='button is-checked' data-filter-value='.stitch-and-glue'>Stitch and Glue</button><br><br><h5 id='filter4-checker'>Ways to Build:</h5><button class='button' data-filter-value='*'>show all</button><button class='button is-checked' data-filter-value='.kit'>Complete Kits</button><button class='button' data-filter-value='.part'>Wood Parts Only Kit</button><br>");
  });

  $("#cartype_btn0").click(function(){
    $("#specific_car_filters_display").html("<br><h3>For All Cars</h3><h5 id='filter5-checker'>Anticipated Use?</h5><button class='button is-checked' data-filter-value='*'>show all</button><button class='button' data-filter-value='.light-touring'>Touring</button><button class='button' data-filter-value='.sailing'>Racing</button><button class='button' data-filter-value='.show'>Showing</button><br>");
  });
  $("#cartype_btn1").click(function(){
    $("#specific_car_filters_display").html("<br><h3>For Convertibles</h3><h5 id='filter5-checker'>Anticipated Use?</h5><button class='button is-checked' data-filter-value='.convertible'>show all</button><button class='button' data-filter-value='.convertible.recreational'>Recreational</button><button class='button' data-filter-value='.convertible.performance'>Performance</button><button class='button' data-filter-value='.convertible.touring'>Touring</button><button class='button' data-filter-value='.convertible.sedan'>Sedan</button><br>");
  });

以下是调用上述代码之一的div之一：

<div id="filters-two" class="button-group">
    <button id="btn0" class="button is-checked" value="0" data-filter-value="*">show all</button>
    <button id="btn1" class="button" value="1" data-filter-value=".none">None</button>
</div>

这是我根据按钮点击重建页面：

/******** REBUILD COMBO FILTER FUNCTION *********/
    function rebuildComboFilter(filterType, filterValue) {
        var newFilterArray = [];
        var newFilterString = '';
        storedComboFilterObject[filterType] = filterValue;
        for (var type in storedComboFilterObject) {
            if (storedComboFilterObject[type] === '*' && _.contains(newFilterArray, '*')) {
                // do nothing: * already present, do not add another * to filters
            } else {
                newFilterArray.push(storedComboFilterObject[type]);
            }
        }

        // sort filters to push a possible * ahead of defined classes
        newFilterArray.sort(function (a, b) {
            return (a === "*") ? -1 : 1;
        });

        newFilterString = newFilterArray.join('');
        storedFilterString = newFilterString;
        $('#filterstringmonitor').val(storedFilterString);
        $container.isotope({ filter: storedFilterString });
    }
    /******** END REBUILD COMBO FILTER FUNCTION *********/


    // respond to click in button-group and rebuild combo filters - check filterSelectors object
    $('.button-group').on('click', 'button', function() {
        var filterValue = $(this).attr('data-filter-value');
        if (filterSelectors[filterValue]) {
            filterValue = filterSelectors[filterValue];
        } else {
            filterValue = filterValue;
        }
        rebuildComboFilter($(this).parent('.button-group').attr('id'), filterValue);
    });

我在网上寻找解决方案并找到了一个参考：

<p><a id="link" href="#">click me</a></p>

<script>
var link = document.getElementById("link");
AttachEvent(link, "click", EventHandler);

function AttachEvent(element, type, handler) {
    if (element.addEventListener) element.addEventListener(type, handler, false);
    else element.attachEvent("on"+type, handler);
}

function EventHandler(e) {
    console.log(this);
}
</script>


All browsers set ‘this’ to the element which fired the event … except one. Internet Explorer 8.0 and below only reference the event handler so ‘this’ is always the global window object.

Fortunately we can determine the target element from the event object instead:


function EventHandler(e) {
    e = e || window.event;
    var target = e.target || e.srcElement;
    console.log(target);
}

但我绝对不知道这是否是我要找的。如果是的话，我不知道eventHandler，类型和元素与我的代码有什么关系。

Answer 1

$("#btn0")是一个对象。如果你想在过滤器div中设置一组按钮对象，你可以使用

var buttons = document.querySelectorAll(".button-group button");

要添加常用的点击处理程序，您可以使用

function buttonHandler(e) {
  e = e || window.event;
  var target = e.target || e.srcElement;
  if(target.id=="btn0") ... // do whatever you want
}

for(var i=0; i<buttons.length; ++i) buttons[i].click = buttonHandler;

将单击功能转换为对象

1 个答案: