Jquery 如何停止编写重复代码_Jquery

Jquery 如何停止编写重复代码

jquery

Jquery 如何停止编写重复代码,jquery,Jquery,嗨，我只是想知道如何将下面的代码更改为更少的代码行，它包含大量重复的代码行基本上，它所做的就是交换图像并使其放大任何帮助都将不胜感激 // JavaScript Document $(function() { var fullWidth = 1500; // Width in pixels of full-sized image var fullHeight = 2000; // Height in pixels of full-sized image var t

嗨，我只是想知道如何将下面的代码更改为更少的代码行，它包含大量重复的代码行

基本上，它所做的就是交换图像并使其放大

任何帮助都将不胜感激

 // JavaScript Document
$(function() {

    var fullWidth = 1500; // Width in pixels of full-sized image
    var fullHeight = 2000; // Height in pixels of full-sized image
    var thumbnailWidth = 327;  // Width in pixels of thumbnail image
    var thumbnailHeight = 480;  // Height in pixels of thumbnail image

    // Set size of div
    $('.big_product').css({
                    'width': thumbnailWidth+'px',
                    'height': thumbnailHeight+'px'
    }); 

  //on page load hide small product2 and small product3
  $('#small_product2,#small_product3').hide();

  var selected_color;
  //get the selected color
  $('#colors option').click(function() {
      selected_color = $('#colors option:selected').text().toLowerCase();

      //show the relevant product according to selected color
      if(selected_color == 'navy') {              
          $('#small_product2,#small_product3').hide();
          $('#small_product1').show();
      }

     else if(selected_color == 'grey') {
          $('#small_product1,#small_product3').hide();
          $('#small_product2').show();
      }

      else if(selected_color == 'black') {
          $('#small_product1,#small_product2').hide();
          $('#small_product3').show();
      }
 });

//hide the full-sized(the largest) pictures
$('#full1-1,#full1-2,#full1-3').hide();

//hide the thumbnails
$('#thumbnail1-1,#thumbnail1-2,#thumbnail1-3').hide();

//when the first small pic is clicked
$('#small_product1-1').click(function() {
    $('#main_product,#big_product1-2,#big_product1-3').hide();
    $('#big_product1-1,#thumbnail1-1').show();
});

// Toggle full and thumbnail pictures on click
$('#big_product1-1').click(function() {
    $('#thumbnail1-1').toggle();
    $('#full1-1').toggle();                 
});

// Do some calculations
    $('#big_product1-1').mousemove(function(e) {
        var mouseX = (e.pageX-400) - $(this).attr('offsetLeft'); 
        var mouseY = (e.pageY-400) - $(this).attr('offsetTop'); 

        var posX = (Math.round((mouseX/thumbnailWidth)*100)/100) * (fullWidth-thumbnailWidth);
        var posY = (Math.round((mouseY/thumbnailHeight)*100)/100) * (fullHeight-thumbnailHeight);

        $('#full1-1').css({
            'left': '-' + posX + 'px',
            'top': '-' + posY + 'px'
        });
  });

//when the second small pic is clicked
$('#small_product1-2').click(function() {
    $('#main_product,#big_product1-1,#big_product1-3').hide();
    $('#big_product1-2,#thumbnail1-2').show();
});

// Toggle full and thumbnail pictures on click
$('#big_product1-2').click(function() {
    $('#thumbnail1-2').toggle();
    $('#full1-2').toggle();                 
});

// Do some calculations
    $('#big_product1-2').mousemove(function(e) {
        var mouseX = (e.pageX-400) - $(this).attr('offsetLeft'); 
        var mouseY = (e.pageY-400) - $(this).attr('offsetTop'); 

        var posX = (Math.round((mouseX/thumbnailWidth)*100)/100) * (fullWidth-thumbnailWidth);
        var posY = (Math.round((mouseY/thumbnailHeight)*100)/100) * (fullHeight-thumbnailHeight);

        $('#full1-2').css({
                        'left': '-' + posX + 'px',
                        'top': '-' + posY + 'px'
        });
  });

//when the third small pic is clicked
$('#small_product1-3').click(function() {
    $('#main_product,#big_product1-1,#big_product1-2').hide();
    $('#big_product1-3,#thumbnail1-3').show();
});

// Toggle full and thumbnail pictures on click
$('#big_product1-3').click(function() {
    $('#thumbnail1-3').toggle();
    $('#full1-3').toggle();                 
});

// Do some calculations
    $('#big_product1-3').mousemove(function(e) {
        var mouseX = (e.pageX-400) - $(this).attr('offsetLeft'); 
        var mouseY = (e.pageY-400) - $(this).attr('offsetTop'); 

        var posX = (Math.round((mouseX/thumbnailWidth)*100)/100) * (fullWidth-thumbnailWidth);
        var posY = (Math.round((mouseY/thumbnailHeight)*100)/100) * (fullHeight-thumbnailHeight);

        $('#full1-3').css({
            'left': '-' + posX + 'px',
            'top': '-' + posY + 'px'
        });
  });
});

本部分：

//show the relevant product according to selected color
if(selected_color == 'navy') {                          
    $('#small_product2,#small_product3').hide();
    $('#small_product1').show();
}
else if(selected_color == 'grey') {
    $('#small_product1,#small_product3').hide();
    $('#small_product2').show();
}
else if(selected_color == 'black') {
    $('#small_product1,#small_product2').hide();
    $('#small_product3').show();
}

可以写成：

//show the relevant product according to selected color
$('#small_product1,#small_product2,#small_product3').hide();
if(selected_color == 'navy') {                          
    $('#small_product1').show();
}
else if(selected_color == 'grey') {
    $('#small_product2').show();
}
else if(selected_color == 'black') {
    $('#small_product3').show();
}

以及重复的部分：

//when the third small pic is clicked
// Toggle full and thumbnail pictures on click
// Do some calculations

可以分解为一个函数。

此部分：

//show the relevant product according to selected color
if(selected_color == 'navy') {                          
    $('#small_product2,#small_product3').hide();
    $('#small_product1').show();
}
else if(selected_color == 'grey') {
    $('#small_product1,#small_product3').hide();
    $('#small_product2').show();
}
else if(selected_color == 'black') {
    $('#small_product1,#small_product2').hide();
    $('#small_product3').show();
}

可以写成：

//show the relevant product according to selected color
$('#small_product1,#small_product2,#small_product3').hide();
if(selected_color == 'navy') {                          
    $('#small_product1').show();
}
else if(selected_color == 'grey') {
    $('#small_product2').show();
}
else if(selected_color == 'black') {
    $('#small_product3').show();
}

以及重复的部分：

//when the third small pic is clicked
// Toggle full and thumbnail pictures on click
// Do some calculations

可以分解为一个函数。

您已经看到，代码中有些段落看起来非常相似。试着找出细微的差别，看看你是否能进一步抽象。因此，与其写3x

// Do some calculations
$('#big_product1-2').mousemove(function(e) {
  var mouseX = (e.pageX-400) - $(this).attr('offsetLeft'); 
  var mouseY = (e.pageY-400) - $(this).attr('offsetTop'); 

  var posX = (Math.round((mouseX/thumbnailWidth)*100)/100) * (fullWidth-thumbnailWidth);
  var posY = (Math.round((mouseY/thumbnailHeight)*100)/100) * (fullHeight-thumbnailHeight);

  $('#full1-2').css({
    'left': '-' + posX + 'px',
    'top': '-' + posY + 'px'
  });
});
$('#big_product1-2').click(function() {
$('#thumbnail1-2').toggle();
$('#full1-2').toggle();

你可以写

var doStuff = function(id) {
   $('#big_product'+id).mousemove(function(e) {
      var mouseX = (e.pageX-400) - $(this).attr('offsetLeft'); 
      var mouseY = (e.pageY-400) - $(this).attr('offsetTop'); 

      var posX = (Math.round((mouseX/thumbnailWidth)*100)/100) * (fullWidth-thumbnailWidth);
      var posY = (Math.round((mouseY/thumbnailHeight)*100)/100) * (fullHeight-thumbnailHeight);

      $('#full'+id).css({
        'left': '-' + posX + 'px',
        'top': '-' + posY + 'px'
      });
    });
$('#big_product'+id).click(function() {
$('#thumbnail'+id).toggle();
$('#full'+id).toggle(); 
}

并用

doStuff（'1-2'）调用它等等…
您已经看到，代码中有些段落看起来非常相似。试着找出细微的差别，看看你是否能进一步抽象。因此，与其写3x
// Do some calculations
$('#big_product1-2').mousemove(function(e) {
  var mouseX = (e.pageX-400) - $(this).attr('offsetLeft'); 
  var mouseY = (e.pageY-400) - $(this).attr('offsetTop'); 

  var posX = (Math.round((mouseX/thumbnailWidth)*100)/100) * (fullWidth-thumbnailWidth);
  var posY = (Math.round((mouseY/thumbnailHeight)*100)/100) * (fullHeight-thumbnailHeight);

  $('#full1-2').css({
    'left': '-' + posX + 'px',
    'top': '-' + posY + 'px'
  });
});
$('#big_product1-2').click(function() {
$('#thumbnail1-2').toggle();
$('#full1-2').toggle(); 

你可以写
var doStuff = function(id) {
   $('#big_product'+id).mousemove(function(e) {
      var mouseX = (e.pageX-400) - $(this).attr('offsetLeft'); 
      var mouseY = (e.pageY-400) - $(this).attr('offsetTop'); 

      var posX = (Math.round((mouseX/thumbnailWidth)*100)/100) * (fullWidth-thumbnailWidth);
      var posY = (Math.round((mouseY/thumbnailHeight)*100)/100) * (fullHeight-thumbnailHeight);

      $('#full'+id).css({
        'left': '-' + posX + 'px',
        'top': '-' + posY + 'px'
      });
    });
$('#big_product'+id).click(function() {
$('#thumbnail'+id).toggle();
$('#full'+id).toggle(); 
}

并用doStuff（'1-2'）调用它等等…
非常幸运的是，jQuery将其操作建立在字符串（选择器）的基础上，因此您可以使用它执行很多操作
下面是我在其中运用技巧的代码。因为我也没有你的HTML代码，我也懒得创建一个，所以我不能测试这个代码。如果我的密码错了，请原谅我-p
代码如下：
// JavaScript Document

function swapSmallProduct(ShowID, MaxID) {
    var ToShow = "#small_product"+ShowID;
    $(ToShow).show();
    // Use loop or array to customize the id
    for(i = 1; i <= MaxID; i++) {
        var IDToHide = ((ShowID + i) % MaxID);
        var ToHide = "#small_product"+IDToHide;
        $(ToHide).hide();
    }
}

function hideAll_Full_and_Thumbnail(MaxID) {
    // Use loop or array to customize the id
    for(i = 1; i <= MaxID; i++) {
        $('#full1-'     +i).hide();
        $('#thumbnail1-'+i).hide();
    }
}

function toggle_BigProduct(ID, MaxID) {
    var ToShow = "#big_product1-"+ShowID+",#thumbnail1-"+ShowID;
    $(ToShow).show();

    $('#main_product').hide();
    for(i = 1; i <= MaxID; i++) {
        var IDToHide = ((ShowID + i) % MaxID);
        var ToHide = "#big_product"+IDToHide;
        $(ToHide).hide();
    }
}
function toggle_Full_and_Thumbnail(ID) {
    // Use function to generalize the id
    $('#thumbnail1-'+ID).toggle();
    $('#full1-'     +ID).toggle();
}

function getNumID(StrID) {
    var RegEx = /[0-9]+$/i;
    var Match = RegEx.exec(StrID);
    if (Match == null)
        return "";

    return 0+Match[0];
}


$(function() {

    var maxID = 3;
    var fullWidth = 1500; // Width in pixels of full-sized image
    var fullHeight = 2000; // Height in pixels of full-sized image
    var thumbnailWidth = 327;  // Width in pixels of thumbnail image
    var thumbnailHeight = 480;  // Height in pixels of thumbnail image

    // on page load hide small product2 and small product3
    $('#small_product2,#small_product3').hide();

    // Set size of div
    $('.big_product').css({
        'width':  thumbnailWidth +'px',
        'height': thumbnailHeight+'px'
    });

    var selected_color;
    //get the selected color
    $('#colors option').click(function() {
        selected_color = $('#colors option:selected').text().toLowerCase();
        // show the relevant product according to selected color
        // Use loop or array to customize the id
        if     (selected_color == 'navy')  swapSmallProduct(1, maxID);
        else if(selected_color == 'grey')  swapSmallProduct(2, maxID);
        else if(selected_color == 'black') swapSmallProduct(3, maxID);
    });

    // Use function to generalize the id
    hideAll_Full_and_Thumbnail(maxID);

    // Use prefix selector
    $(<i>"[id^='small_product1-']"</i>).click(function() {
        // and extract the ID to customize each click function
        var aNumID = getNumID($(this).attr("id"));
        // Use function to generalize the id
        toggle_BigProduct(aNumID, MaxID);
    }
    // Use prefix selector
    $(<i>"[id^='big_product1-']"</i>).click(function() {
        // and extract the ID to customize each click function
        var aNumID = getNumID($(this).attr("id"));
        // Use function to generalize the id
        toggle_Full_and_Thumbnail(aNumID);
    }

    // Use prefix selector
    $(<i>"[id^='big_product1-']"</i>).mousemove(function(e) {
        // and extract the ID to customize each click function
        var aNumID = getNumID($(this).attr("id"));

        var mouseX = (e.pageX-400) - $(this).attr('offsetLeft'); 
        var mouseY = (e.pageY-400) - $(this).attr('offsetTop'); 

        var posX = (Math.round((mouseX/thumbnailWidth )*100)/100) * (fullWidth  - thumbnailWidth);
        var posY = (Math.round((mouseY/thumbnailHeight)*100)/100) * (fullHeight - thumbnailHeight);

        $('#full1-'+aNumID).css({
            'left': '-' + posX + 'px',
            'top':  '-' + posY + 'px'
        });
    });
}

}

//JavaScript文档
函数swapSmallProduct（ShowID、MaxID）{
var ToShow=“#小型产品”+ShowID；
$（ToShow.show（）；
//使用循环或数组自定义id
对于（i=1；i来说，非常幸运的是jQuery将其操作建立在字符串（选择器）的基础上，因此您可以使用它执行很多操作
以下是我在代码中运用我能想到的技巧的代码。因为我没有你的HTML代码，而且我也懒得创建一个，所以我无法测试此代码。如果我在代码中出错，请原谅我。：-p
代码如下：
// JavaScript Document

function swapSmallProduct(ShowID, MaxID) {
    var ToShow = "#small_product"+ShowID;
    $(ToShow).show();
    // Use loop or array to customize the id
    for(i = 1; i <= MaxID; i++) {
        var IDToHide = ((ShowID + i) % MaxID);
        var ToHide = "#small_product"+IDToHide;
        $(ToHide).hide();
    }
}

function hideAll_Full_and_Thumbnail(MaxID) {
    // Use loop or array to customize the id
    for(i = 1; i <= MaxID; i++) {
        $('#full1-'     +i).hide();
        $('#thumbnail1-'+i).hide();
    }
}

function toggle_BigProduct(ID, MaxID) {
    var ToShow = "#big_product1-"+ShowID+",#thumbnail1-"+ShowID;
    $(ToShow).show();

    $('#main_product').hide();
    for(i = 1; i <= MaxID; i++) {
        var IDToHide = ((ShowID + i) % MaxID);
        var ToHide = "#big_product"+IDToHide;
        $(ToHide).hide();
    }
}
function toggle_Full_and_Thumbnail(ID) {
    // Use function to generalize the id
    $('#thumbnail1-'+ID).toggle();
    $('#full1-'     +ID).toggle();
}

function getNumID(StrID) {
    var RegEx = /[0-9]+$/i;
    var Match = RegEx.exec(StrID);
    if (Match == null)
        return "";

    return 0+Match[0];
}


$(function() {

    var maxID = 3;
    var fullWidth = 1500; // Width in pixels of full-sized image
    var fullHeight = 2000; // Height in pixels of full-sized image
    var thumbnailWidth = 327;  // Width in pixels of thumbnail image
    var thumbnailHeight = 480;  // Height in pixels of thumbnail image

    // on page load hide small product2 and small product3
    $('#small_product2,#small_product3').hide();

    // Set size of div
    $('.big_product').css({
        'width':  thumbnailWidth +'px',
        'height': thumbnailHeight+'px'
    });

    var selected_color;
    //get the selected color
    $('#colors option').click(function() {
        selected_color = $('#colors option:selected').text().toLowerCase();
        // show the relevant product according to selected color
        // Use loop or array to customize the id
        if     (selected_color == 'navy')  swapSmallProduct(1, maxID);
        else if(selected_color == 'grey')  swapSmallProduct(2, maxID);
        else if(selected_color == 'black') swapSmallProduct(3, maxID);
    });

    // Use function to generalize the id
    hideAll_Full_and_Thumbnail(maxID);

    // Use prefix selector
    $(<i>"[id^='small_product1-']"</i>).click(function() {
        // and extract the ID to customize each click function
        var aNumID = getNumID($(this).attr("id"));
        // Use function to generalize the id
        toggle_BigProduct(aNumID, MaxID);
    }
    // Use prefix selector
    $(<i>"[id^='big_product1-']"</i>).click(function() {
        // and extract the ID to customize each click function
        var aNumID = getNumID($(this).attr("id"));
        // Use function to generalize the id
        toggle_Full_and_Thumbnail(aNumID);
    }

    // Use prefix selector
    $(<i>"[id^='big_product1-']"</i>).mousemove(function(e) {
        // and extract the ID to customize each click function
        var aNumID = getNumID($(this).attr("id"));

        var mouseX = (e.pageX-400) - $(this).attr('offsetLeft'); 
        var mouseY = (e.pageY-400) - $(this).attr('offsetTop'); 

        var posX = (Math.round((mouseX/thumbnailWidth )*100)/100) * (fullWidth  - thumbnailWidth);
        var posY = (Math.round((mouseY/thumbnailHeight)*100)/100) * (fullHeight - thumbnailHeight);

        $('#full1-'+aNumID).css({
            'left': '-' + posX + 'px',
            'top':  '-' + posY + 'px'
        });
    });
}

}

//JavaScript文档
函数swapSmallProduct（ShowID、MaxID）{
var ToShow=“#小型产品”+ShowID；
$（ToShow.show（）；
//使用循环或数组自定义id
对于（i=1；i我建议您阅读。它让您大开眼界。我建议您阅读。它让您大开眼界。我喜欢表驱动的代码。这意味着当您添加第四个或第五个控件时，答案可以很好地缩放。它还很好地将数据与实现之间的关联分离。我不必运行下面的代码（我的PHP很弱）所以它是伪代码，但希望它能传递这个想法
array control_colour_map = {
    { 'navy', 'small_product1',
    { 'grey', 'small_product2',
    { 'black', 'small_product3' }

for item in control_colour_map
{
    if( selected_colour = item.first )
        item.second.show()
    else
        item.second.hide()
}

如果有一个show/hide函数使用布尔参数，那么它可能会更短
for item in control_colour_map
    item.second.show( selected_colour = item.first )

我喜欢表驱动代码。这意味着当您添加第四个或第五个控件时，答案可以很好地扩展。它还可以很好地将数据与实现之间的关联分离。我不需要运行下面的代码（我的PHP很弱），所以它是伪代码，但希望它能传递这个想法
array control_colour_map = {
    { 'navy', 'small_product1',
    { 'grey', 'small_product2',
    { 'black', 'small_product3' }

for item in control_colour_map
{
    if( selected_colour = item.first )
        item.second.show()
    else
        item.second.hide()
}

如果有一个show/hide函数使用布尔参数，那么它可能会更短
for item in control_colour_map
    item.second.show( selected_colour = item.first )

首先我会整理代码-删除行首多余的空白。然后我们可以实际查看代码。首先我会整理代码-删除行首多余的空白。然后我们可以实际查看代码。如果颜色在id$（“#small_product_uuu”+selected_color）中，可能会更小.show（）；
如果颜色在id$（“#small_product_u”+所选颜色）中，则可能更小。show（）；