Question

我仍在学习jQuery，无法解决如何干净地使用'nth'选择器来定位所需的类-即使在查看了“相似”线程之后，由于我不理解某些代码。

我目标：

表示一个特定的“初级筛选”按钮将针对一组特定的 '二次过滤器'。
当一组“辅助过滤器”处于活动状态并且单击另一个“主过滤器”按钮时，它将隐藏先前显示的“辅助过滤器”。
我也不确定过渡为何不起作用，但是..不重要。

请在此处查看我的jsFiddle：https://jsfiddle.net/0azykcto/4/

对于我正在创建的网站，该人员可能偶尔会添加其他“主要过滤器”按钮，以及与之配套的一组“辅助过滤器”。

$(document).ready(function(){
  $("#primary-filters .btn:nth-child(1)").click(function(){
    $('.secondary-filters:nth-child(2)').toggleClass("height");
  });
  $("#primary-filters .btn:nth-child(2)").click(function(){
    $('.secondary-filters:nth-child(3)').toggleClass("height");
  });
  $("#primary-filters .btn:nth-child(3)").click(function(){
    $('.secondary-filters:nth-child(4)').toggleClass("height");
  });
});

我希望有可能是一个简单的方法来循环这个过程可能。如果有人能够指出我所缺少的方向/如何实现这一目标，那将不胜感激。

Answer 1

您可以依靠索引来简化此操作，也可以使用如下所示的show / hide

    import java.awt.Color;

public class OperationContour implements OperationImage {

public Color[][] doOperation(Color[][] imagingArray) {
    int numberOfRows = imagingArray.length;
    int numberOfColumns = imagingArray[0].length;

    Color[][] result = new Color[numberOfRows][numberOfColumns];

    for (int i = 0; i < numberOfRows; i++)
        for (int j = 0; j < numberOfColumns; j++) {

            Color pix1 = imagingArray[i][j];
            Color pix2 = imagingArray[i][j];

            double colorDifference = Math.sqrt(Math.pow(pix1.getRed() - pix2.getRed(),2) + Math.pow(pix1.getGreen() - pix2.getGreen(),2) + Math.pow(pix1.getBlue() - pix2.getBlue(),2));

            // BELOW
            if (i < numberOfRows-1 && j>0) {
                pix2 = imagingArray[i+1][j];
                colorDifference = Math.sqrt(Math.pow(pix1.getRed() - pix2.getRed(),2) + Math.pow(pix1.getGreen() - pix2.getGreen(),2) + Math.pow(pix1.getBlue() - pix2.getBlue(),2));
                if (colorDifference > 65) {
                    pix1 = Color.BLACK;}
                else {
                    pix1 = Color.WHITE; 


        // #2 BOTTOM RIGHT
            if (j < numberOfColumns-1 && i < numberOfRows-1){
                pix2 = imagingArray[i+1][j+1];
                colorDifference = Math.sqrt(Math.pow(pix1.getRed() - pix2.getRed(),2) + Math.pow(pix1.getGreen() - pix2.getGreen(),2) + Math.pow(pix1.getBlue() - pix2.getBlue(),2));
                if (colorDifference > 65) {
                    pix1 = Color.BLACK;}
                else {
                    pix1 = Color.WHITE;     
                    }
                }

        // #3 BOTTOM LEFT
            if(j > 0 && i < numberOfRows-1){
                pix2 = imagingArray[i+1][j-1];
                colorDifference = Math.sqrt(Math.pow(pix1.getRed() - pix2.getRed(),2) + Math.pow(pix1.getGreen() - pix2.getGreen(),2) + Math.pow(pix1.getBlue() - pix2.getBlue(),2));
                if (colorDifference > 65) {
                    pix1 = Color.BLACK;}
                else {
                    pix1 = Color.WHITE;     
                    }
                }
            }           

            // ABOVE
            if(i>0 && j>0){
                pix2 = imagingArray[i-1][j];
                colorDifference = Math.sqrt(Math.pow(pix1.getRed() - pix2.getRed(),2) + Math.pow(pix1.getGreen() - pix2.getGreen(),2) + Math.pow(pix1.getBlue() - pix2.getBlue(),2));
                if (colorDifference > 65) {
                    pix1 = Color.BLACK;}
                else {
                    pix1 = Color.WHITE;     
                }

            // TOP RIGHT
            if(j < numberOfColumns-1 && i>0){
                pix2 = imagingArray[i-1][j+1];
                colorDifference = Math.sqrt(Math.pow(pix1.getRed() - pix2.getRed(),2) + Math.pow(pix1.getGreen() - pix2.getGreen(),2) + Math.pow(pix1.getBlue() - pix2.getBlue(),2));
                if (colorDifference > 65) {
                    pix1 = Color.BLACK;}
                else {
                    pix1 = Color.WHITE;     
                }
            }
            //6  TOP LEFT
            if(j > 0 && i>0 ){
                pix2 = imagingArray[i-1][j-1];
                colorDifference = Math.sqrt(Math.pow(pix1.getRed() - pix2.getRed(),2) + Math.pow(pix1.getGreen() - pix2.getGreen(),2) + Math.pow(pix1.getBlue() - pix2.getBlue(),2));
                if (colorDifference > 65) {
                    pix1 = Color.BLACK;}
                else {
                    pix1 = Color.WHITE;     
                }
            }

            // 7 RIGHT
            if(j<numberOfColumns-1 && i>0) {
                pix2 = imagingArray[i][j+1];
                colorDifference = Math.sqrt(Math.pow(pix1.getRed() - pix2.getRed(),2) + Math.pow(pix1.getGreen() - pix2.getGreen(),2) + Math.pow(pix1.getBlue() - pix2.getBlue(),2));
                if (colorDifference > 65) {
                    pix1 = Color.BLACK;}
                else { 
                    pix1 = Color.WHITE;     
                }
            }
        }
            // 8 LEFT
            if(j>0 && i>0) {
                pix2 = imagingArray[i][j-1];
                colorDifference = Math.sqrt(Math.pow(pix1.getRed() - pix2.getRed(),2) + Math.pow(pix1.getGreen() - pix2.getGreen(),2) + Math.pow(pix1.getBlue() - pix2.getBlue(),2));
                if (colorDifference > 65) {
                    pix1 = Color.BLACK;}
                else { 
                    pix1 = Color.WHITE;}
            }
            }
        }
    return result;
}

$(document).ready(function() {

   var sel = "#primary-filters .btn";

  $(sel).click(function() {
    var i = $(sel).index(this);
    $('.secondary-filters').hide(); /*Hide all*/
    $('.secondary-filters').eq(i).show(); /*show the needed one*/
  });
});

#primary-filters .btn:nth-child(1) {
  background: #dd6565;
}

#primary-filters .btn:nth-child(2) {
  background: #6587dd;
}

#primary-filters .btn:nth-child(3) {
  background: #65dd6e;
}

.secondary-filters {
  background: #F1F1F1;
  overflow: hidden;
  display:none;
}

.secondary-filters:nth-child(2) .btn {
  background: red;
}

.secondary-filters:nth-child(3) .btn {
  background: blue;
}

.secondary-filters:nth-child(4) .btn {
  background: green;
}

或淡入淡出功能：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="filter-container">
  <div id="primary-filters">
    <button class="btn">Filter One</button>
    <button class="btn">Filter Two</button>
    <button class="btn">Filter Three</button>
  </div>

  <div class="secondary-filters">
    <button class="btn">Button One</button>
    <button class="btn">Button Two</button>
  </div>

  <div class="secondary-filters">
    <button class="btn">Button One</button>
    <button class="btn">Button Two</button>
  </div>

  <div class="secondary-filters">
    <button class="btn">Button One</button>
    <button class="btn">Button Two</button>
  </div>
</div>

$(document).ready(function() {

  var sel = "#primary-filters .btn";

  $(sel).click(function() {
    var i = $(sel).index(this);
    $('.secondary-filters').hide();
    $('.secondary-filters').eq(i).fadeIn();
  });
});

#primary-filters .btn:nth-child(1) {
  background: #dd6565;
}

#primary-filters .btn:nth-child(2) {
  background: #6587dd;
}

#primary-filters .btn:nth-child(3) {
  background: #65dd6e;
}

.secondary-filters {
  background: #F1F1F1;
  overflow: hidden;
  display:none;
}

.secondary-filters:nth-child(2) .btn {
  background: red;
}

.secondary-filters:nth-child(3) .btn {
  background: blue;
}

.secondary-filters:nth-child(4) .btn {
  background: green;
}

在jQuery中使用'nth'选择器来定位特定的类

1 个答案: