Question

我正在尝试构建一个简单而简单的网页设计应用程序（主要用于触控设备），即便是我的侄子也可以使用。但是我今天遇到了一个恼人的问题。经过几个小时的反复试验，我现在正在寻求帮助:(。

我的问题是下一个和前进箭头按钮（不是平方按钮）。

我正在做的是当我点击说下一个按钮（#movenext）时，我首先要查看是否有下一个元素/标签，如果有，那么我正在选择带有类的元素叫.selected。如果我选择了我想要提醒的最后一个元素，那就是我选择的父母的最后一个孩子。

无论我做什么，我似乎无法弄清楚如何解决这个问题。

enter image description here

// Make Next Selected 
$("#movenext").click(function() {
  if ( $(".selected").is(":visible") ) {
    // Detect If New Selection Has Tag
    if ( $(".selected").next().prop("tagName") === [undefined, false] ) {
      // No Selection
      alert("last child selected");
      $("#deselectelement").trigger("click");
    } else {
      $(".selected").removeClass("selected").next().addClass("selected");
      $("#selected-tag").val( $(".selected").prop("tagName").toLowerCase() );
      $("#selected-element").val( $(".selected").attr("class").replace(/ /g," ") );
    }
  } else {
    // No element selected
    $("#moveprev, #movenext, #toparent, #tochild, #editelement, #deselectelement, #delelement, #editTagAttributes").addClass("hide");
  }
});

$(document).ready(function() {
  // Draggable FunctionBar
  $(".functionbar").draggable({
    axis: "y",
    handle: ".handlesbar"
  });

  // Select Elements
  var SelectElements = function() {
    $("#dynamic-storage").children().on("mouseup touchend", function() {
      if ( $(".selected").is(":visible") ) {
        $(".selected").removeClass("selected");
      }

      $(this).addClass("selected");

      // Check if first & last child is selected
      if ( $(this).is(":first-child") && $(this).is(":last-child") ) {
        if ( $("#moveprev").hasClass() === "hide" ) {
          // Do nothing
        } else if ( $("#movenext").hasClass() === "hide" ) {
          // Do nothing
        } else {
          $("#moveprev, #movenext").addClass("hide");
          $("#tochild").removeClass("hide");
          return false;
        }
        // Check if first child is selected
      } else if ( $(this).is(":first-child") ) {
        if ( $("#moveprev").hasClass() === "hide" ) {
          // Do nothing
        } else {
          $("#moveprev").addClass("hide");
          $("#movenext, #tochild").removeClass("hide");
          return false;
        }
        // Check if last child is selected
      } else if ( $(this).is(":last-child") ) {
        if ( $("#movenext").hasClass() === "hide" ) {
          // Do nothing
        } else {
          $("#movenext").addClass("hide");
        }
        $("#moveprev, #tochild").removeClass("hide");
      } else {
        // Check if in middle
        $("#moveprev, #movenext, #tochild").removeClass("hide");
      }
    });
  };
  // Call Selection
  var CallSelection = function() {
    // Check if first & last child is selected
    if ( $(".selected").is(":first-child") && $(".selected").is(":last-child") ) {
      if ( $("#moveprev").hasClass() === "hide" ) {
        // Do nothing
      } else if ( $("#movenext").hasClass() === "hide" ) {
        // Do nothing
      } else {
        $("#moveprev, #movenext").addClass("hide");
        $("#tochild").removeClass("hide");
        return false;
      }
      // Check if first child is selected
    } else if ( $(".selected").is(":first-child") ) {
      if ( $("#moveprev").hasClass() === "hide" ) {
        // Do nothing
      } else {
        $("#moveprev").addClass("hide");
        $("#movenext, #tochild").removeClass("hide");
        return false;
      }
      // Check if last child is selected
    } else if ( $(".selected").is(":last-child") ) {
      if ( $("#movenext").hasClass() === "hide" ) {
        // Do nothing
      } else {
        $("#movenext").addClass("hide");
      }
      $("#moveprev, #tochild").removeClass("hide");
    } else {
      // Check if in middle
      $("#moveprev, #movenext, #tochild").removeClass("hide");
    }
  };
  // Clear Selection
  var ClearSelection = function() {
    $(".selected").removeClass("selected");
    $("#moveprev, #movenext, #toparent, #tochild").addClass("hide");
  };
  SelectElements();
});

/* Body */
#dynamic-storage {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0;
}

/* FunctionBar */
.functionbar {
  position: absolute;
  top: 20px;
  left: 25px;
  right: 25px;
  z-index: 998;
}

.functionbar .handlesbar {
  position: absolute;
  top: 0;
  left: 0;
  margin: auto;
  width: 100%;
  padding: 6px 0;
  border-radius: 10px 10px 0 0;
  font: 24px arial;
  text-align: center;
  background: hsla(180, 0%, 0%, .75);
  word-spacing: 12px;
  z-index: 999;
  -webkit-user-select: none;
   -khtml-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
       -o-user-select: none;
          user-select: none;
}

.functionbar a {
  text-decoration: none;
  color: hsl(180, 0%, 90%);
}

.functionbar .active {
  color: #9cf;
}

.functionbar .hide {
  display: none;
}

/* Dialog Sec */
.functionbar .reveal {
  position: relative;
  top: 50px;
  left: 0;
  margin: auto;
  width: 100%;
  height: 200px;
  overflow: auto;
}

.functionbar .reveal, .functionbar input[type=text], .functionbar textarea {
  font-family: arial;
  background: rgba(255, 255, 255, 0.6);
}

.functionbar input[type=text], .functionbar textarea {
  border: 1px solid rgba(0, 0, 0, 0.6);
  margin-bottom: 10px;
}

.functionbar input[type=text], .functionbar textarea, #change-selected-tag, #confirm-style {
  font-size: 24px;
  color: #000;
}

#dynamic-storage .selected {
  outline: 2px dotted #69f;
}

/* Addable Elements */
.functionbar .addcontent {
  text-align: center;
}

.functionbar .addcontent .element, .functionbar .editcontent .element {
  cursor: pointer;
  display: inline-block;
  text-align: center;
  padding: 2%;
  width: 20%;
  border: 1px solid rgba(204, 204, 204, 0.67);
  color: #262B2F;
}
.functionbar .element:hover {
  background: rgba(255, 255, 255, 0.6);
}
.functionbar .element .fa {
  font-size: 26px;
}
.functionbar .element h4 {
  font-weight: 300;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=9" />
    <link type='text/css' rel='stylesheet' href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css" />
    <link type='text/css' rel='stylesheet' href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
    <link type="text/css" rel="stylesheet" href="assets/fonts/font-awesome.min.css" />
  </head>
  <body>
    <!-- FunctionBar -->
    <div class="functionbar">
      
      <div class="handlesbar">
        <div class="handlesbar-page1">
          <a id="moveprev" title="Select Previous Element" href="javascript:void(0)">
            <span class="fa fa-angle-left"></span>
          </a> 
          <a id="movenext" title="Select Next Element" href="javascript:void(0)">
            <span class="fa fa-angle-right"></span>
          </a> 
          <a id="toparent" class="hide" title="Select Parent" href="javascript:void(0)">
            <span class="fa fa-caret-square-o-up"></span>
          </a> 
          <a id="tochild" title="Select First Index" href="javascript:void(0)">
            <span class="fa fa-caret-square-o-down"></span>
          </a> 
        </div>
      </div>
    </div>
    
    <div id="dynamic-storage">
      <div class="header" align="center">
        <h1>Welcome</h1>
        <h5>My name is Michael.</h5>
        <span>Hello world</span>
      </div>
      <div class="header selected" align="left">
        <h1>Welcome</h1>
        <h5>My name is Michael.</h5>
      </div>
      <div class="header" align="right">
        <h1>Welcome</h1>
        <h5>My name is Michael.</h5>
      </div>
    </div>
  </body>
</html>

Answer 1

我能够解决下一个，之前和之前的问题。儿童选择。

我做的是检查.selected班级是:first-child还是:last-child，是否是第一个隐藏前一个孩子，以及是否是下一个要隐藏的孩子。这种方式可以防止使用下一个和上一个按钮发生任何错误。

这是我使用的一些代码。

// If prev element accessable make it selectable
var movePrev = function() {
  // Detect If New Selection Has Tag
  if ( $(".selected").prev().is(":visible") ) {
    // Show/Add Tag & Class
    $("#selected-tag").val( $(".selected").prev().prop("tagName").toLowerCase() );
    $(".selected").removeClass("selected").prev().addClass("selected");
    $("#selected-element").val( $(".selected").attr("class").replace(/ /g," ") );
    $(".code").val( $(".selected").html() );
    checkParent();
  }

  // Check if first & last child is selected
  if ( $(".selected").is(":first-child") && $(".selected").is(":last-child") ) {
    if ( $("#moveprev").hasClass() === "hide" ) {
      // Do nothing
    } else if ( $("#movenext").hasClass() === "hide" ) {
      // Do nothing
    } else {
      $("#moveprev, #movenext").addClass("hide");
      $("#toparent, #tochild, #editelement, #deselectelement, #delelement, #editTagAttributes").removeClass("hide");
      return false;
    }
  // Check if first child is selected
  } else if ( $(".selected").is(":first-child") ) {
    if ( $("#moveprev").hasClass() === "hide" ) {
      // Do nothing
    } else {
      $("#moveprev").addClass("hide");
      $("#movenext, #toparent, #tochild, #editelement, #deselectelement, #delelement, #editTagAttributes").removeClass("hide");
      return false;
    }
    // Check if last child is selected
  } else if ( $(".selected").is(":last-child") ) {
    if ( $("#movenext").hasClass() === "hide" ) {
      // Do nothing
    } else {
      $("#movenext").addClass("hide");
    }
    $("#moveprev, #toparent, #tochild, #editelement, #deselectelement, #delelement, #editTagAttributes").removeClass("hide");
  } else {
    // Check if in middle
    $("#moveprev, #movenext, #toparent, #tochild, #editelement, #deselectelement, #delelement, #editTagAttributes").removeClass("hide");
  }
};

子按钮解决方案..

// If child is accessable make it selectable
var check4Child = function() {
  // Check if it has child if not hide button
  if ( $(".selected").children().length <= 0 ) {
    $("#tochild").addClass("hide");
    return false;
  }
  if ( $(".selected").children().is(":hidden") ) {
    $("#tochild").addClass("hide");
    return false;
  }
};

父按钮解决方案......

// #dynamic-storage & .functionbar must not be selectable
var checkParent = function() {
 if ( $(".selected").parent().is("#dynamic-storage") ) {
    $("#toparent").addClass("hide");
  }
};

现在是片段。

$(document).ready(function() {
  // Draggable FunctionBar
  $(".functionbar").draggable({
    axis: "y",
    handle: ".handlesbar"
  });

  // Select Elements
  var SelectElements = function() {
    $("#dynamic-storage").children().on("mouseup touchend", function() {
      if ( $(".selected").is(":visible") ) {
        $(".selected").removeClass("selected");
      }

      $(this).addClass("selected");
      $("#selected-element").val( $(this).attr("class").replace(/ /g," "));
      $("#selected-tag").val( $(this).prop("tagName").toLowerCase() );
      $(".code").val( $(".selected").html() );

      checkParent();

      // Check if first & last child is selected
      if ( $(this).is(":first-child") && $(this).is(":last-child") ) {
        if ( $("#moveprev").hasClass() === "hide" ) {
          // Do nothing
        } else if ( $("#movenext").hasClass() === "hide" ) {
          // Do nothing
        } else {
          $("#moveprev, #movenext").addClass("hide");
          $("#tochild").removeClass("hide");
          return false;
        }
        // Check if first child is selected
      } else if ( $(this).is(":first-child") ) {
        if ( $("#moveprev").hasClass() === "hide" ) {
          // Do nothing
        } else {
          $("#moveprev").addClass("hide");
          $("#movenext, #tochild").removeClass("hide");
          return false;
        }
        // Check if last child is selected
      } else if ( $(this).is(":last-child") ) {
        if ( $("#movenext").hasClass() === "hide" ) {
          // Do nothing
        } else {
          $("#movenext").addClass("hide");
        }
        $("#moveprev, #tochild").removeClass("hide");
      } else {
        // Check if in middle
        $("#moveprev, #movenext, #tochild").removeClass("hide");
      }

      check4Child();
    });
  };
  // Call Selection
  var CallSelection = function() {
    checkParent();

    // Check if first & last child is selected
    if ( $(".selected").is(":first-child") && $(".selected").is(":last-child") ) {
      if ( $("#moveprev").hasClass() === "hide" ) {
        // Do nothing
      } else if ( $("#movenext").hasClass() === "hide" ) {
        // Do nothing
      } else {
        $("#moveprev, #movenext").addClass("hide");
        $("#tochild").removeClass("hide");
        return false;
      }
      // Check if first child is selected
    } else if ( $(".selected").is(":first-child") ) {
      if ( $("#moveprev").hasClass() === "hide" ) {
        // Do nothing
      } else {
        $("#moveprev").addClass("hide");
        $("#movenext, #tochild").removeClass("hide");
        return false;
      }
      // Check if last child is selected
    } else if ( $(".selected").is(":last-child") ) {
      if ( $("#movenext").hasClass() === "hide" ) {
        // Do nothing
      } else {
        $("#movenext").addClass("hide");
      }
      $("#moveprev, #tochild").removeClass("hide");
    } else {
      // Check if in middle
      $("#moveprev, #movenext, #tochild").removeClass("hide");
    }

    check4Child();
  };
  // Clear Selection
  var ClearSelection = function() {
    $("#selected-tag, #selected-element, .code").val("");
    $(".selected").removeClass("selected");
    $("#moveprev, #movenext, #toparent, #tochild").addClass("hide");
  };
  // If prev element accessable make it selectable
  var movePrev = function() {
    // Detect If New Selection Has Tag
    if ( $(".selected").prev().is(":visible") ) {
      // Show/Add Tag & Class
      $(".selected").removeClass("selected").prev().addClass("selected");
      checkParent();
    }

    // Check if first & last child is selected
    if ( $(".selected").is(":first-child") && $(".selected").is(":last-child") ) {
      if ( $("#moveprev").hasClass() === "hide" ) {
        // Do nothing
      } else if ( $("#movenext").hasClass() === "hide" ) {
        // Do nothing
      } else {
        $("#moveprev, #movenext").addClass("hide");
        $("#toparent, #tochild").removeClass("hide");
        return false;
      }
      // Check if first child is selected
    } else if ( $(".selected").is(":first-child") ) {
      if ( $("#moveprev").hasClass() === "hide" ) {
        // Do nothing
      } else {
        $("#moveprev").addClass("hide");
        $("#movenext, #toparent, #tochild").removeClass("hide");
        return false;
      }
      // Check if last child is selected
    } else if ( $(".selected").is(":last-child") ) {
      if ( $("#movenext").hasClass() === "hide" ) {
        // Do nothing
      } else {
        $("#movenext").addClass("hide");
      }
      $("#moveprev, #toparent, #tochild").removeClass("hide");
    } else {
      // Check if in middle
      $("#moveprev, #movenext, #toparent, #tochild").removeClass("hide");
    }
  };
  // If next element accessable make it selectable
  var moveNext = function() {
    // Detect If New Selection Has Tag
    if ( $(".selected").next().is(":visible") ) {
      // Show/Add Tag & Class
      $(".selected").removeClass("selected").next().addClass("selected");
      checkParent();
    }

    // Check if first & last child is selected
    if ( $(".selected").is(":first-child") && $(".selected").is(":last-child") ) {
      if ( $("#moveprev").hasClass() === "hide" ) {
        // Do nothing
      } else if ( $("#movenext").hasClass() === "hide" ) {
        // Do nothing
      } else {
        $("#moveprev, #movenext").addClass("hide");
        $("#toparent, #tochild").removeClass("hide");
        return false;
      }
      // Check if first child is selected
    } else if ( $(".selected").is(":first-child") ) {
      if ( $("#moveprev").hasClass() === "hide" ) {
        // Do nothing
      } else {
        $("#moveprev").addClass("hide");
        $("#movenext, #toparent, #tochild").removeClass("hide");
        return false;
      }
      // Check if last child is selected
    } else if ( $(".selected").is(":last-child") ) {
      if ( $("#movenext").hasClass() === "hide" ) {
        // Do nothing
      } else {
        $("#movenext").addClass("hide");
      }
      $("#moveprev, #toparent, #tochild").removeClass("hide");
    } else {
      // Check if in middle
      $("#moveprev, #movenext, #toparent, #tochild").removeClass("hide");
    }
    check4Child();
  };
  // If child is accessable make it selectable
  var check4Child = function() {
    // Check if it has child if not hide button
    if ( $(".selected").children().length <= 0 ) {
      $("#tochild").addClass("hide");
      return false;
    }
    if ( $(".selected").children().is(":hidden") ) {
      $("#tochild").addClass("hide");
      return false;
    }
  };
  // #dynamic-storage & .functionbar must not be selectable
  var checkParent = function() {
    if ( $(".selected").parent().is("#dynamic-storage") ) {
      $("#toparent").addClass("hide");
    }
  };
  SelectElements();

  // Handles Next/Prev/Parent/Children Selections
  $(function() {
    // Make Parent Selected 
    $("#toparent").click(function() {
      if ( $(".selected").is(":visible") ) {
        if ( $(".selected").parent().is("#dynamic-storage") ) {
          $("#toparent").addClass("hide");
        } else {
          $(".selected").parent().addClass("selected").children().removeClass("selected");
          movePrev();
          CallSelection();
        }

        // Check if first & last child is selected
        if ( $(".selected").is(":first-child") && $(".selected").is(":last-child") ) {
          if ( $("#moveprev").hasClass() === "hide" ) {
            // Do nothing
          } else if ( $("#movenext").hasClass() === "hide" ) {
            // Do nothing
          } else {
            $("#moveprev, #movenext").addClass("hide");
            $("#tochild").removeClass("hide");
            return false;
          }
          // Check if first child is selected
        } else if ( $(".selected").is(":first-child") ) {
          if ( $("#moveprev").hasClass() === "hide" ) {
            // Do nothing
          } else {
            $("#moveprev").addClass("hide");
            $("#movenext, #tochild").removeClass("hide");
            return false;
          }
          // Check if last child is selected
        } else if ( $(".selected").is(":last-child") ) {
          if ( $("#movenext").hasClass() === "hide" ) {
            // Do nothing
          } else {
            $("#movenext").addClass("hide");
          }
          $("#moveprev, #tochild").removeClass("hide");
        } else {
          // Check if in middle
          $("#moveprev, #movenext, #tochild").removeClass("hide");
        }
      } else {
        // No element selected
        $("#moveprev, #movenext, #toparent, #tochild").addClass("hide");
      }
    });

    // Make Child Selected 
    $("#tochild").click(function() {
      if ( $(".selected").is(":visible") ) {
        // Detect First Tag
        if ( $(".selected").children().first().length > 0 ) {
          $(".selected").removeClass("selected").children().first().addClass("selected");
          movePrev();
          CallSelection();
          check4Child();
        } else {
          ClearSelection();
        }
      } else {
        // No element selected
        $("#moveprev, #movenext, #toparent, #tochild").addClass("hide");
      }
    });

    // Make Previous Selected 
    $("#moveprev").click(function() {
      if ( $(".selected").is(":visible") ) {
        movePrev();
        CallSelection();
        check4Child();
      } else {
        // No element selected
        $("#moveprev, #movenext, #toparent, #tochild").addClass("hide");
      }
    });

    // Make Next Selected 
    $("#movenext").click(function() {
      if ( $(".selected").is(":visible") ) {
        moveNext();
        CallSelection();
      } else {
        // No element selected
        $("#moveprev, #movenext, #toparent, #tochild").addClass("hide");
      }
    });
  });
});

/* Body */
#dynamic-storage {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0;
}

/* FunctionBar */
.functionbar {
  position: absolute;
  top: 20px;
  left: 25px;
  right: 25px;
  z-index: 998;
}

.functionbar .handlesbar {
  position: absolute;
  top: 0;
  left: 0;
  margin: auto;
  width: 100%;
  padding: 6px 0;
  border-radius: 10px 10px 0 0;
  font: 24px arial;
  text-align: center;
  background: hsla(180, 0%, 0%, .75);
  word-spacing: 12px;
  z-index: 999;
  -webkit-user-select: none;
   -khtml-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
       -o-user-select: none;
          user-select: none;
}

.functionbar a {
  text-decoration: none;
  color: hsl(180, 0%, 90%);
}

.functionbar .active {
  color: #9cf;
}

.functionbar .hide {
  display: none;
}

/* Dialog Sec */
.functionbar .reveal {
  position: relative;
  top: 50px;
  left: 0;
  margin: auto;
  width: 100%;
  height: 200px;
  overflow: auto;
}

.functionbar .reveal, .functionbar input[type=text], .functionbar textarea {
  font-family: arial;
  background: rgba(255, 255, 255, 0.6);
}

.functionbar input[type=text], .functionbar textarea {
  border: 1px solid rgba(0, 0, 0, 0.6);
  margin-bottom: 10px;
}

.functionbar input[type=text], .functionbar textarea, #change-selected-tag, #confirm-style {
  font-size: 24px;
  color: #000;
}

#dynamic-storage .selected {
  outline: 2px dotted #69f;
}

/* Addable Elements */
.functionbar .addcontent {
  text-align: center;
}

.functionbar .addcontent .element, .functionbar .editcontent .element {
  cursor: pointer;
  display: inline-block;
  text-align: center;
  padding: 2%;
  width: 20%;
  border: 1px solid rgba(204, 204, 204, 0.67);
  color: #262B2F;
}
.functionbar .element:hover {
  background: rgba(255, 255, 255, 0.6);
}
.functionbar .element .fa {
  font-size: 26px;
}
.functionbar .element h4 {
  font-weight: 300;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=9" />
    <link type='text/css' rel='stylesheet' href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css" />
    <link type='text/css' rel='stylesheet' href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
    <link type="text/css" rel="stylesheet" href="assets/fonts/font-awesome.min.css" />
  </head>
  <body>
    <!-- FunctionBar -->
    <div class="functionbar">
      
      <div class="handlesbar">
        <div class="handlesbar-page1">
          <a id="moveprev" title="Select Previous Element" href="javascript:void(0)">
            <span class="fa fa-angle-left"></span>
          </a> 
          <a id="movenext" title="Select Next Element" href="javascript:void(0)">
            <span class="fa fa-angle-right"></span>
          </a> 
          <a id="toparent" class="hide" title="Select Parent" href="javascript:void(0)">
            <span class="fa fa-caret-square-o-up"></span>
          </a> 
          <a id="tochild" title="Select First Index" href="javascript:void(0)">
            <span class="fa fa-caret-square-o-down"></span>
          </a> 
        </div>
      </div>
    </div>
    
    <div id="dynamic-storage">
      <div class="header" align="center">
        <h1>Welcome</h1>
        <h5>My name is Michael.</h5>
        <span>Hello world</span>
      </div>
      <div class="header selected" align="left">
        <h1>Welcome</h1>
        <h5>My name is Michael.</h5>
      </div>
      <div class="header" align="right">
        <h1>Welcome</h1>
        <h5>My name is Michael.</h5>
      </div>
    </div>
  </body>
</html>

检查jQuery中是否可以选择下一个元素，如果是，请选择它

1 个答案: