需要 jQuery 代码重构帮助

发布于 2024-10-05 08:32:08 字数 1377 浏览 5 评论 0原文

对之前的更新，这就是我正在处理的内容：

<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>

不幸的是，此代码无法正常工作。我借用了下面建议的解决方案。

如果它确实有效就好了！任何建议，非常欢迎。

原文

An update to before, here's what I'm dealing with:

<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>

This code is not working unfortunately. I have borrowed from suggested solution below.

Would be nice if it did work!
Any suggestions, most welcome.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

烟雨扶苏 2024-10-12 08:32:08

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

每当showCarrot时切换carrotBig
被点击。
每当单击 showCarrot 时隐藏 div.hidden。

所以你需要的是：

$("#showCarrot").click(function () {
   $("#carrotBig").toggle("fast");
   $("#div.hidden").hide();
});

.toggle 将处理你的标志之一（isCarrotBig），如果 div.hidden 已经隐藏， .hide() 将不会执行任何操作，这样就可以处理你的 isAnyBig 标志。

现在..让我们也用broc 来实现这一点...

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

setupVegetable("showCarrot", "carrotBig");
setupVegetable("showBroc", "brocBig");

如果您有兴趣，您可以进一步重构它，这样您就不需要为每种蔬菜提供ID。不过我需要查看您的 HTML 标记。

I don't think you need any of the flags or the if conditions really. I think your logic is:

toggle carrotBig whenever showCarrot
is clicked.
hide div.hidden whenever showCarrot is clicked.

So all you need is:

$("#showCarrot").click(function () {
   $("#carrotBig").toggle("fast");
   $("#div.hidden").hide();
});

.toggle will handle one of your flags (isCarrotBig) and .hide() won't do anything if div.hidden is already hidden, so that takes care of your isAnyBig flag.

Now.. let's make that work with broc as well...

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

setupVegetable("showCarrot", "carrotBig");
setupVegetable("showBroc", "brocBig");

If you're interested, you can refactor it FURTHER so you don't need to supply the IDs for each of the vegetables. I'll need to see your HTML markup though.

回复收藏 0 原文

染火枫林 2024-10-12 08:32:08

好的，我将发布一个新的答案来回应编辑。

值得注意的点：

删除了 imgs 周围的 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>

Ok I'll post a new answer in response to the edit.

Points worth noting:

Removed divs surrounding the imgs - they are unnecessary and complicate the relationship between the thumnnails and the large images.
Removed onclick attribute from within HTML - you will be attaching the event handlers in the JS so this is not needed.
Since the relationship between the thumbnails and the large images is quite obvious (the large images is just the next element) you don't need IDs to identify ANY of them. All you need is a class on the thumbnails.
Since we're not using IDs, only classes, you can add as many vegetables as you want without touching the JS

Your code modified:

<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>

回复收藏 0 原文

寂寞陪衬 2024-10-12 08:32:08

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

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

然后

$("#whatever").click(toggleElements);

create a function and reuse it....something like:

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

and then

$("#whatever").click(toggleElements);

回复收藏 0 原文

被翻牌 2024-10-12 08:32:08

我个人建议创建一个简单的 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'})

你的下一步应该是调查是否可以摆脱全局变量。

Personally I would suggest creating a simple jQuery plugin. Something like so:

(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);

Then you just call it with something like so:

 $("#showCarrot").big({target: '#carrotBig'})

Your next step should be to investigate whether you can get rid of the global variables or not.

回复收藏 0 原文

↘人皮目录ツ 2024-10-12 08:32:08

好吧，我找到了一个简洁的解决方案，依赖于每个隐藏的 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>

Ok I have found a neat(ish) sollution, dependent on each hidden DIV being the .next() one. If it isn't it won't work but should be fine generally though. Hacked!

<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>

回复收藏 0 原文

~没有更多了~