javascript - jQuery - 向函数添加代码以简化(停止重复类似的事情)

Question

我是 jQuery 新手 - 所以如果这是一个愚蠢的问题，我深表歉意:)

我面临的挑战是让我的团队使用的代码足够简单，以允许不太“熟练”的人进行更新。

我已经为所有需要更改的内容设置了变量，并且它按照我的预期工作。

我唯一的疑问是，我将一遍又一遍地运行相同的 4 件事，并且我觉得我可以在函数中实现我想要的目标？

这是一个带有 3 个不同横幅的 fiddle : http://jsfiddle.net/8ez46mpg/

我针对不同的横幅重复了几次:

var $primaryBanner1 = $('#banner-01');
$primaryBanner1.attr('title', primaryOneTxt);
$primaryBanner1.html("<h2>" + primaryOneTxt + "</h2>");
$primaryBanner1.attr('href', primaryOneUrl);
$primaryBanner1.css("background", "url("+primaryOneImg+")");

有什么方法可以将其简化为更小的函数吗？而不是每页使用相同的 4 行多达 15 次？

任何帮助都会非常好!

谢谢!

Answer 1

只需创建一个执行重复操作的函数并传入动态变量即可。

function styleBanner(selector, txt, url, img){
  var $el = $(selector);
  $el.attr({
    title: txt,
    href: url
  }).css('background', 'url('+img+')')
    .html('<h2>'+txt+'</h2>');

  return $el;
}

var $primaryBanner1 = styleBanner('#banner-01', primaryOneTxt, primaryOneUrl, primaryOneImg);