我如何让这个Javascript代码更少重复？

Question

我是新来的Javascript和自学一些课程。我只是好奇，我怎么能让下面的代码重复性较低？有没有办法以不同的方式处理以下问题，还是您会遵循相同的方法？

var imgContainer = document.getElementById("imgContainer"); 
var lorem = document.querySelector(".hdr-left"); 
var ipsum = document.querySelector(".hdr-right"); 

//When clicking on imgContainer toggle between class to change colour and position 
imgContainer.addEventListener('click', function() { 
    lorem.classList.toggle("hdr-color-white"); 
    ipsum.classList.toggle("hdr-color-white"); 
    lorem.classList.toggle('hdr-left-middle'); 
    ipsum.classList.toggle('hdr-right-middle'); 
}); 

Answer 1

的一种方式是创建一个toggle功能：

var imgContainer = document.getElementById("imgContainer"); 
var lorem = document.querySelector(".hdr-left"); 
var ipsum = document.querySelector(".hdr-right"); 

function toggle(el, className) { 
    el.classList.toggle(className); 
} 

//When clicking on imgContainer toggle between class to change colour and position 
imgContainer.addEventListener('click', function() { 
    toggle(lorem, "hdr-color-white"); 
    toggle(ipsum, "hdr-color-white"); 
    toggle(lorem, 'hdr-left-middle'); 
    toggle(ipsum, 'hdr-right-middle'); 
}); 

另一种方法是创建操作数据的数组：

var imgContainer = document.getElementById("imgContainer"); 
var lorem = document.querySelector(".hdr-left"); 
var ipsum = document.querySelector(".hdr-right"); 

toggleOps = [ 
    { el: lorem, name: 'hdr-color-white'}, 
    { el: ipsum, name: 'hdr-color-white'}, 
    { el: lorem, name: 'hdr-left-middle'}, 
    { el: ipsum, name: 'hdr-right-middle'} 
] 


//When clicking on imgContainer toggle between class to change colour and position 
imgContainer.addEventListener('click', function() { 
    toggleOps.forEach() 
    function(op) { 
     op.el.classList.toggle(op.name); 
    } 
) 
}); 

减少代码总是除非还原一件好事使代码难以理解。

数据驱动器代码非常好，因为您可以添加更多数据而无需编写其他代码。

保持干爽（不要重复自己）是值得的。如果我写了两次，我想重构将重复的代码移动到一个函数中。如果我需要第三次复制它，那么我会利用这个时间来重构一个新函数并修复所有三个地方来调用函数。

Answer 2

，您可以拨打方法做重复的工作：

var imgContainer = document.getElementById("imgContainer"); 
var lorem = document.querySelector(".hdr-left"); 
var ipsum = document.querySelector(".hdr-right"); 

//When clicking on imgContainer toggle between class to change colour and position 
imgContainer.addEventListener('click', function() { 
toggleClass(lorem.classList,"hdr-color-white"); 
// so on... 
}); 


function toggleClass(elementClassList, className){ 
elementClassList.toggle(className); 
}