Fatal编程技术网
  • javascript/
  • Javascript 需要jQuery代码重构帮助

Javascript 需要jQuery代码重构帮助

javascript jquery

Javascript 需要jQuery代码重构帮助,javascript,jquery,refactoring,Javascript,Jquery,Refactoring,之前的更新，以下是我要处理的内容： <body> <div class="header"> <img class="imgLogo" src="img/vegtablelogo.jpg"> </div> <div id="thumbsContainer"> <div class="thumb" id="carrotThumb"> <img id="showCarrot" class="imgThumb" src="

之前的更新，以下是我要处理的内容：

<body>
<div class="header"> <img class="imgLogo" src="img/vegtablelogo.jpg"> </div>
<div id="thumbsContainer">
  <div class="thumb" id="carrotThumb"> <img id="showCarrot" class="imgThumb" src="img/carot.jpg" onClick=setupVeg("showCarrot", "carrotBig") /> </div>
  <div class="hidden" id="carrotBig"> <img class="imgBig" src="img/carot.jpg" /> </div>
  <div class="thumb" id="brocThumb"> <img id="showBroc" class="imgThumb" src="img/brocoli.jpg" onClick=setupVeg("showBroc", "brocBig") /> </div>
  <div class="hidden" id="brocBig"> <img class="imgBig" src="img/brocoli.jpg" /> </div>
</div>
<!-- end thumbs container --> 

<script>
var active = "";

function setupVeg(thumbVeg, hiddenVeg) {
    $("#" + thumbVeg).click(function() {
        if (active != hiddenVeg) {
            $("div.hidden").hide("fast");
            $("#" + hiddenVeg).show("fast", function() {});
            active = hiddenVeg;
        }
        else {
            $("div.hidden").hide("fast");
            active="";
        }
    });
}

$("div.hidden").click(function () {
    $("div.hidden").hide("fast");
    isAnyBig=false;
});

</script>
</body>


var active=“”；
功能设置VEG（thumbVeg、hiddenVeg）{
$（“#”+thumbVeg）。单击（函数（）{
如果（活动！=hiddenVeg）{
$（“div.hidden”）.hide（“fast”）；
$（“#”+hiddenVeg.show（“fast”，function（）{}）；
活动=隐藏；
}
否则{
$（“div.hidden”）.hide（“fast”）；
主动=”；
}
});
}
$（“div.hidden”）。单击（函数（）{
$（“div.hidden”）.hide（“fast”）；
isAnyBig=假；
});
不幸的是，此代码不起作用。我借用了下面建议的解决方案

如果它真的有用那就太好了！
欢迎提供任何建议。

创建一个函数并重用它……类似于：

/**
 * document here....
 */
var toggleElements = function() {
// your code here
}
然后

$("#whatever").click(toggleElements);
创建一个函数并重用它…类似于：

/**
 * document here....
 */
var toggleElements = function() {
// your code here
}
然后

$("#whatever").click(toggleElements);
我个人建议创建一个简单的jQuery插件。大概是这样的：

(function($){
 $.fn.big = function(options) {

  var defaults = {
   target: '#carrotBig',
  };
  var options = $.extend(defaults, options);

  return this.each(function() {
$(this).click(function () {
    isBrocBig=false;
  if (isCarrotBig == false && isAnyBig == false) {
    $(options.target).show("fast", function() {});
    isCarrotBig=true;
    isAnyBig=true;
    }
  else if (isCarrotBig == true) {
    $(options.target).hide("fast");
    isCarrotBig=false;
    isAnyBig=false;
  }
  else if (isCarrotBig == false && isAnyBig == true) {
    $("div.hidden").hide("fast");
    $(options.target).show("fast", function() {});
    isCarrotBig=true;
  }
  else {
      $("div.hidden").hide("fast");
      isCarrotBig=false;
      isAnyBig=false;
  }
});
  });
 };
})(jQuery);

 $("#showCarrot").big({target: '#carrotBig'})
然后你可以这样称呼它：

(function($){
 $.fn.big = function(options) {

  var defaults = {
   target: '#carrotBig',
  };
  var options = $.extend(defaults, options);

  return this.each(function() {
$(this).click(function () {
    isBrocBig=false;
  if (isCarrotBig == false && isAnyBig == false) {
    $(options.target).show("fast", function() {});
    isCarrotBig=true;
    isAnyBig=true;
    }
  else if (isCarrotBig == true) {
    $(options.target).hide("fast");
    isCarrotBig=false;
    isAnyBig=false;
  }
  else if (isCarrotBig == false && isAnyBig == true) {
    $("div.hidden").hide("fast");
    $(options.target).show("fast", function() {});
    isCarrotBig=true;
  }
  else {
      $("div.hidden").hide("fast");
      isCarrotBig=false;
      isAnyBig=false;
  }
});
  });
 };
})(jQuery);

 $("#showCarrot").big({target: '#carrotBig'})
您的下一步应该是调查您是否可以摆脱全局变量。

我个人建议创建一个简单的jQuery插件。大概是这样的：

(function($){
 $.fn.big = function(options) {

  var defaults = {
   target: '#carrotBig',
  };
  var options = $.extend(defaults, options);

  return this.each(function() {
$(this).click(function () {
    isBrocBig=false;
  if (isCarrotBig == false && isAnyBig == false) {
    $(options.target).show("fast", function() {});
    isCarrotBig=true;
    isAnyBig=true;
    }
  else if (isCarrotBig == true) {
    $(options.target).hide("fast");
    isCarrotBig=false;
    isAnyBig=false;
  }
  else if (isCarrotBig == false && isAnyBig == true) {
    $("div.hidden").hide("fast");
    $(options.target).show("fast", function() {});
    isCarrotBig=true;
  }
  else {
      $("div.hidden").hide("fast");
      isCarrotBig=false;
      isAnyBig=false;
  }
});
  });
 };
})(jQuery);

 $("#showCarrot").big({target: '#carrotBig'})
然后你可以这样称呼它：

(function($){
 $.fn.big = function(options) {

  var defaults = {
   target: '#carrotBig',
  };
  var options = $.extend(defaults, options);

  return this.each(function() {
$(this).click(function () {
    isBrocBig=false;
  if (isCarrotBig == false && isAnyBig == false) {
    $(options.target).show("fast", function() {});
    isCarrotBig=true;
    isAnyBig=true;
    }
  else if (isCarrotBig == true) {
    $(options.target).hide("fast");
    isCarrotBig=false;
    isAnyBig=false;
  }
  else if (isCarrotBig == false && isAnyBig == true) {
    $("div.hidden").hide("fast");
    $(options.target).show("fast", function() {});
    isCarrotBig=true;
  }
  else {
      $("div.hidden").hide("fast");
      isCarrotBig=false;
      isAnyBig=false;
  }
});
  });
 };
})(jQuery);

 $("#showCarrot").big({target: '#carrotBig'})
下一步应该是研究是否可以去掉全局变量。

我认为实际上不需要任何标志或if条件。我认为你的逻辑是：

  • 在显示胡萝卜时切换大胡萝卜 单击
  • 单击showCarrot时隐藏div.hidden
因此，您所需要的是：

$("#showCarrot").click(function () {
   $("#carrotBig").toggle("fast");
   $("#div.hidden").hide();
});
.toggle将处理您的一个标志（isCarrotBig），如果div.hidden已隐藏，则.hide（）将不会执行任何操作，因此它将处理您的isAnyBig标志

现在。。让我们和布罗克一起工作吧

function setupVegetable(showId, toggleId) {
   $("#" + showId).click(function () {
      $("#" + toggleId).toggle("fast");
      $("#div.hidden").hide();
   });
}

setupVegetable("showCarrot", "carrotBig");
setupVegetable("showBroc", "brocBig");
如果您感兴趣，可以进一步重构它，这样就不需要为每种蔬菜提供ID。不过，我需要查看您的HTML标记。

我认为您实际上不需要任何标志或if条件。我认为你的逻辑是：

  • 在显示胡萝卜时切换大胡萝卜 单击
  • 单击showCarrot时隐藏div.hidden
因此，您所需要的是：

$("#showCarrot").click(function () {
   $("#carrotBig").toggle("fast");
   $("#div.hidden").hide();
});
.toggle将处理您的一个标志（isCarrotBig），如果div.hidden已隐藏，则.hide（）将不会执行任何操作，因此它将处理您的isAnyBig标志

现在。。让我们和布罗克一起工作吧

function setupVegetable(showId, toggleId) {
   $("#" + showId).click(function () {
      $("#" + toggleId).toggle("fast");
      $("#div.hidden").hide();
   });
}

setupVegetable("showCarrot", "carrotBig");
setupVegetable("showBroc", "brocBig");
如果您感兴趣，可以进一步重构它，这样就不需要为每种蔬菜提供ID。但我需要查看您的HTML标记。

好的，我将发布一个新的答案以响应编辑

值得注意的几点：

  • 移除了IMG周围的div-它们是不必要的，并且使恶棍和大图像之间的关系复杂化
  • 从HTML中删除了onclick属性-您将在JS中附加事件处理程序，因此不需要这样做
  • 因为缩略图和大图像之间的关系非常明显（大图像只是下一个元素），所以不需要ID来识别它们。你所需要的只是一个关于缩略图的课程
  • 因为我们不使用ID，只使用类，所以您可以添加任意数量的蔬菜，而无需触摸JS
您的代码已修改：

<body>
<div class="header"> <img class="imgLogo" src="img/vegtablelogo.jpg"> </div>
<div id="thumbsContainer">
  <img class="imgThumb" src="img/carot.jpg" /> 
  <img class="imgBig hidden" src="img/carot.jpg" />
  <img class="imgThumb" src="img/brocoli.jpg" />
  <img class="imgBig hidden" src="img/brocoli.jpg" />
</div>
<!-- end thumbs container --> 

<script>

$("#thumbsContainer .imgThumb").click(function () {
   var thisImgBig = $(this).next();

   // Hide all imgBigs, except for this one
   $("#thumbsContainer .imgBig").not(thisImgBig[0]).hide();
   // Toggle this imgBig
   thisImgBig.toggle();
});

$("#thumbsContainer .imgBig").click(function () {
   // Hide this imgBig
   $(this).hide();
});

</script>
</body>


$（“#thumbsContainer.imgThumb”）。单击（函数（）{
var thisImgBig=$（this.next（）；
//隐藏除此之外的所有imgbig
$（“#thumbsContainer.imgBig”）.not（thisImgBig[0]）.hide（）；
//切换此imgBig
thisImgBig.toggle（）；
});
$（“#thumbsContainer.imgBig”）。单击（函数（）{
//隐藏这个imgBig
$（this.hide（）；
});
好的，我将发布一个新的答案以回应编辑

值得注意的几点：

  • 移除了IMG周围的div-它们是不必要的，并且使恶棍和大图像之间的关系复杂化
  • 从HTML中删除了onclick属性-您将在JS中附加事件处理程序，因此不需要这样做
  • 因为缩略图和大图像之间的关系非常明显（大图像只是下一个元素），所以不需要ID来识别它们。你所需要的只是一个关于缩略图的课程
  • 因为我们不使用ID，只使用类，所以您可以添加任意数量的蔬菜，而无需触摸JS
您的代码已修改：

<body>
<div class="header"> <img class="imgLogo" src="img/vegtablelogo.jpg"> </div>
<div id="thumbsContainer">
  <img class="imgThumb" src="img/carot.jpg" /> 
  <img class="imgBig hidden" src="img/carot.jpg" />
  <img class="imgThumb" src="img/brocoli.jpg" />
  <img class="imgBig hidden" src="img/brocoli.jpg" />
</div>
<!-- end thumbs container --> 

<script>

$("#thumbsContainer .imgThumb").click(function () {
   var thisImgBig = $(this).next();

   // Hide all imgBigs, except for this one
   $("#thumbsContainer .imgBig").not(thisImgBig[0]).hide();
   // Toggle this imgBig
   thisImgBig.toggle();
});

$("#thumbsContainer .imgBig").click(function () {
   // Hide this imgBig
   $(this).hide();
});

</script>
</body>


$（“#thumbsContainer.imgThumb”）。单击（函数（）{
var thisImgBig=$（this.next（）；
//隐藏除此之外的所有imgbig
$（“#thumbsContainer.imgBig”）.not（thisImgBig[0]）.hide（）；
//切换此imgBig
thisImgBig.toggle（）；
});
$（“#thumbsContainer.imgBig”）。单击（函数（）{
//隐藏这个imgBig
$（this.hide（）；
});
好的，我找到了一个简洁的（ish）解决方案，取决于每个隐藏的DIV是.next（）一个。如果不是这样的话，它就不会起作用，但总体来说应该是好的。黑客

<div class="header"> <img class="imgLogo" src="img/vegtablelogo.jpg"> </div>
<div id="thumbsContainer">
  <div class="thumb" id="carrotThumb"> <img id="showCarrot" class="imgThumb" src="img/carot.jpg" /> </div>
  <div class="hidden" id="carrotBig"> <img class="imgBig" src="img/carot.jpg" /> </div>
  <div class="thumb" id="brocThumb"> <img id="showBroc" class="imgThumb" src="img/brocoli.jpg" /> </div>
  <div class="hidden" id="brocBig"> <img class="imgBig" src="img/brocoli.jpg" /> </div>
</div>
<!-- end thumbs container --> 

<script>
var active = "";

$("div.thumb").click(function() {
    var thumbVeg = $(this).attr("id");
    var hiddenVeg = $(this).next().attr("id");
    setupVeg(thumbVeg, hiddenVeg);
});



function setupVeg(thumbVeg, hiddenVeg) {
    if (active != hiddenVeg) {
        $("div.hidden").hide("fast");
        $("#" + hiddenVeg).show("fast", function() {});
        active = hiddenVeg;
    }
    else {
        $("div.hidden").hide("fast");
        active="";
    }
}

$("div.hidden").click(function () {
    $("div.hidden").hide("fast");
});

</script>


var active=“”；
$（“div.thumb”）。单击（函数（）{
var thumbVeg=$（this.attr（“id”）；
var hiddenVeg=$（this.next（）.attr（“id”）；
setupVeg（拇指蔬菜、hiddenVeg）；
});
功能设置VEG（thumbVeg、hiddenVeg）{
如果（活动！=hiddenVeg）{
$（“div.hidden”）.hide（“fast”）；
$（“#”+hiddenVeg.show（“fast”，function（）{}）；
活动=隐藏；
}
否则{
$（“div.hidden”）.hide（“fast”）；
主动=”；
}
}
$（“div.hidden”）。单击（函数（）{
$（“div.hidden”）.hide（“fast”）；
});
好的，我找到了一个简洁的（ish）解决方案，取决于每个隐藏的DIV是.next（）一个。如果不是这样的话，它就不会起作用，但总体来说应该是好的。黑客

<div class="header"> <img class="imgLogo" src="img/vegtablelogo.jpg"> </div>
<div id="thumbsContainer">
  <div class="thumb" id="carrotThumb"> <img id="showCarrot" class="imgThumb" src="img/carot.jpg" /> </div>
  <div class="hidden" id="carrotBig"> <img class="imgBig" src="img/carot.jpg" /> </div>
  <div class="thumb" id="brocThumb"> <img id="showBroc" class="imgThumb" src="img/brocoli.jpg" /> </div>
  <div class="hidden" id="brocBig"> <img class="imgBig" src="img/brocoli.jpg" /> </div>
</div>
<!-- end thumbs container --> 

<script>
var active = "";

$("div.thumb").click(function() {
    var thumbVeg = $(this).attr("id");
    var hiddenVeg = $(this).next().attr("id");
    setupVeg(thumbVeg, hiddenVeg);
});



function setupVeg(thumbVeg, hiddenVeg) {
    if (active != hiddenVeg) {
        $("div.hidden").hide("fast");
        $("#" + hiddenVeg).show("fast", function() {});
        active = hiddenVeg;
    }
    else {
        $("div.hidden").hide("fast");
        active="";
    }
}

$("div.hidden").click(function () {
    $("div.hidden").hide("fast");
});

</script>


var active=“”；
$（“div.thumb”）。单击（函数（）{
var thumbVeg=$（this.attr（“id”）；
var hiddenVeg=$（this.next（）.attr（“id”）；
setupVeg（拇指蔬菜、hiddenVeg）；
});
傅