blocks|key|4048011|text|我用自动生成的方块制作了我的小片段，可以按照你的建议移动。你可以去看看。如果有什么不好，你可能会指出，也许我忘了什么。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4048012|​|4048013|let+cardsArray+=+[{
++"value":+7,
++"color":+"red"
+},+{
+++"value":+6,
+++"color":+"yellow"
+},+{
+++"value":+5,
+++"color":+"green"
+},+{
+++"value":+4,
+++"color":+"red"
+},+{
+++"value":+3,
+++"color":++"yellow"
+},+{
+++"value":+2,
+++"color":+"green"
+},+{
+++"value":+1,
+++"color":+"green"
}]

//+Function+to+automatically+generate+some+squares
function+drawSquares()+{
++let+squaresParent+=+$("#squaresParent");
++squaresParent.empty();
++let+lCALen+=+cardsArray.length;
++
++for+(let+i+=+0;+i+<+lCALen;+%2B%2Bi)+{+//make+it+efficient+for+checking+length
++++//+Creating+a+text+object+for+display+purposes+only
++++let+newText+=+$('<p>').append(cardsArray[i].value);
++++
++++//+Creating+a+new+card
++++let+newCard+=+$('<div>').attr({
++++++'data-value':+cardsArray[i].value,
++++++'style':+'background-color:'+%2B+cardsArray[i].color,
++++++'index':+i,
++++++'class':+'card'
++++++}).append(newText);
++++++
++++squaresParent.append(newCard);
++}
}

drawSquares();
assignEvents();

let+firstCard+=+null;
let+secondCard+=+null;

function+compareAndMove(fC,+sC)+{
++//console.log("Switching...");
++
++let+firstCardIndex+=+fC.attr("index");
++let+secondCardIndex+=+sC.attr("index");
++
++let+beforeSecondCardIndex+=+0;
++if+(secondCardIndex+>+0)
++++beforeSecondCardIndex+=+secondCardIndex+-+1;
++
++let+firstCard+=+cardsArray[firstCardIndex];
++let+secondCard+=+cardsArray[secondCardIndex];
++let+beforeSecond+=+cardsArray[beforeSecondCardIndex];

++if+(firstCard.value+-+1+===+beforeSecond.value)+{
++++let+temp+=+firstCard;
++++cardsArray[firstCardIndex]+=+secondCard;
++++cardsArray[secondCardIndex]+=+temp;
++++
++++drawSquares();
++++assignEvents();
++}+else+{
++++fC.removeClass("selected");
++++sC.removeClass("selected");
++}
++
++//console.log("Exiting...");
}

function+assignEvents()+{
++$(".card").click(function()+{
++++//console.log("Card+clicked");

++++if+(!firstCard)+{
++++++firstCard+=+$(this);
++++++firstCard.addClass("selected");
++++++return;
++++}

++++if+(!secondCard)+{
++++++secondCard+=+$(this);
++++++secondCard.addClass("selected");
++++}

++++compareAndMove(firstCard,+secondCard);
++++firstCard+=+null;
++++secondCard+=+null;
++});
}|code-block|syntax|javascript|4048014|.card+{
++width:+50px;
++height:+50px;
++
++border-radius:+10px;
++border:+1px+solid+black;
++display:+inline-block;
++text-align:+center;
++margin:+5px;
}

.selected+{
+border:+3px+solid+black;
}

body+{
++background-color:+#ABCDEF;
}|4048015|<script+src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
++++<body>
++++++<div+id="squaresParent"></div>
++++</body>
</html>|4048016|4048017|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|R|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|K|3|L|5|F|7|T|8|@]|9|@]|A|$G|H]]|$1|M|3|C|5|6|7|U|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|O|$]]

<p>I made my little snippet with auto-generating squares that can be moved as you suggested. You might check it out. If something is not okay, you might point it out, maybe I forgot something.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>let cardsArray = [{
  "value": 7,
  "color": "red"
 }, {
   "value": 6,
   "color": "yellow"
 }, {
   "value": 5,
   "color": "green"
 }, {
   "value": 4,
   "color": "red"
 }, {
   "value": 3,
   "color":  "yellow"
 }, {
   "value": 2,
   "color": "green"
 }, {
   "value": 1,
   "color": "green"
}]

// Function to automatically generate some squares
function drawSquares() {
  let squaresParent = $("#squaresParent");
  squaresParent.empty();
  let lCALen = cardsArray.length;
  
  for (let i = 0; i &lt; lCALen; ++i) { //make it efficient for checking length
    // Creating a text object for display purposes only
    let newText = $('&lt;p&gt;').append(cardsArray[i].value);
    
    // Creating a new card
    let newCard = $('&lt;div&gt;').attr({
      'data-value': cardsArray[i].value,
      'style': 'background-color:' + cardsArray[i].color,
      'index': i,
      'class': 'card'
      }).append(newText);
      
    squaresParent.append(newCard);
  }
}

drawSquares();
assignEvents();

let firstCard = null;
let secondCard = null;

function compareAndMove(fC, sC) {
  //console.log("Switching...");
  
  let firstCardIndex = fC.attr("index");
  let secondCardIndex = sC.attr("index");
  
  let beforeSecondCardIndex = 0;
  if (secondCardIndex &gt; 0)
    beforeSecondCardIndex = secondCardIndex - 1;
  
  let firstCard = cardsArray[firstCardIndex];
  let secondCard = cardsArray[secondCardIndex];
  let beforeSecond = cardsArray[beforeSecondCardIndex];

  if (firstCard.value - 1 === beforeSecond.value) {
    let temp = firstCard;
    cardsArray[firstCardIndex] = secondCard;
    cardsArray[secondCardIndex] = temp;
    
    drawSquares();
    assignEvents();
  } else {
    fC.removeClass("selected");
    sC.removeClass("selected");
  }
  
  //console.log("Exiting...");
}

function assignEvents() {
  $(".card").click(function() {
    //console.log("Card clicked");

    if (!firstCard) {
      firstCard = $(this);
      firstCard.addClass("selected");
      return;
    }

    if (!secondCard) {
      secondCard = $(this);
      secondCard.addClass("selected");
    }

    compareAndMove(firstCard, secondCard);
    firstCard = null;
    secondCard = null;
  });
}</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.card {
  width: 50px;
  height: 50px;
  
  border-radius: 10px;
  border: 1px solid black;
  display: inline-block;
  text-align: center;
  margin: 5px;
}

.selected {
 border: 3px solid black;
}

body {
  background-color: #ABCDEF;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;html&gt;
    &lt;body&gt;
      &lt;div id="squaresParent"&gt;&lt;/div&gt;
    &lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>


blocks|key|4048059|text|Array.from是获取元素数组的规范方法|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4048060|<div+class="card"+data-value="38">
++<img+class="front-face"+src="PNG/QH.png"/>
</div>

<div+class="card"+data-value="39">
++<img+class="front-face"+src="PNG/KH.png"/>
</div>

<script>
++const+[first,+second]+=+Array.from(document.querySelectorAll('.card'))
++if+(first.dataset.value+===+second.dataset.value)+{
++++/*+do+your+thing...+*/
++}
</script>|code-block|syntax|javascript|4048061|entityMap^0|0|A|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p><code>Array.from</code> is the canonical way to get an array of elements</p>

<pre><code>&lt;div class="card" data-value="38"&gt;
  &lt;img class="front-face" src="PNG/QH.png"/&gt;
&lt;/div&gt;

&lt;div class="card" data-value="39"&gt;
  &lt;img class="front-face" src="PNG/KH.png"/&gt;
&lt;/div&gt;

&lt;script&gt;
  const [first, second] = Array.from(document.querySelectorAll('.card'))
  if (first.dataset.value === second.dataset.value) {
    /* do your thing... */
  }
&lt;/script&gt;
</code></pre>


blocks|key|4048100|text|我想你正在寻找这样的东西..|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4048101|​|4048102|var+currentCard+=+$(".cards").first();
var+currentCardInd+=+$(currentCard).attr("index");

$(".cards").on("click",+function(event){
++++if(currentCard+&&+parseInt(currentCardInd)+<+parseInt($(this).attr("index"))){
++++++currentCard.attr("index",+$(this).attr("index"));
++++++$(this).attr("index",+currentCardInd.toString());
++++++$(this).swapWith(currentCard);
++++++currentCard+=+$(".cards[index='"%2B$(this).attr("index")%2B"']").next();
++++++currentCardInd+=+$(currentCard).attr("index");
++++}
});


jQuery.fn.swapWith+=+function(_with)+{
++++return+this.each(function()+{
++++++++var+copyWith+=+$(_with).clone(true);
++++++++var+copyOrig+=+$(this).clone(true);
++++++++$(_with).replaceWith(copyOrig);
++++++++$(this).replaceWith(copyWith);
++++});
};|code-block|syntax|javascript|4048103|.cards{
++padding:10px;
++background-color:lightblue;
++display:inline-block;
++cursor:pointer;
++border-radius:5px;
}

#card-7S{
++background-color:lightgreen;
}
#card-9D{
++background-color:lightyellow;
}
#card-8H{
++background-color:lightgray;
}
#card-3D{
++background-color:lightpink;
}|4048104|<script+src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div+class="main">
++<div+id="card-2d"+class="cards"+index="2">2D</div>
++<div+id="card-7S"+class="cards"+index="4">7S</div>
++<div+id="card-9D"+class="cards"+index="7">9D</div>
++<div+id="card-8H"+class="cards"+index="10">8H</div>
++<div+id="card-3D"+class="cards"+index="15">3D</div>
</div>|4048105|4048106|你也可以在这里查看..https://jsfiddle.net/nimittshah/7z3y8mb5/|offset|length|4048107|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/nimittshah/7z3y8mb5/^0|0|0|0|0|0|0|B|15|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|10|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|11|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|12|8|@]|9|@]|A|$G|H]]|$1|K|3|L|5|F|7|13|8|@]|9|@]|A|$G|H]]|$1|M|3|C|5|6|7|14|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|15|8|@]|9|@$P|16|Q|17|1|18]]|A|$]]|$1|R|3|-4|5|6|7|19|8|@]|9|@]|A|$]]]|S|$T|$5|U|V|W|A|$X|Y]]]]

<p>I think you are looking for something like this..</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var currentCard = $(".cards").first();
var currentCardInd = $(currentCard).attr("index");

$(".cards").on("click", function(event){
    if(currentCard &amp;&amp; parseInt(currentCardInd) &lt; parseInt($(this).attr("index"))){
      currentCard.attr("index", $(this).attr("index"));
      $(this).attr("index", currentCardInd.toString());
      $(this).swapWith(currentCard);
      currentCard = $(".cards[index='"+$(this).attr("index")+"']").next();
      currentCardInd = $(currentCard).attr("index");
    }
});


jQuery.fn.swapWith = function(_with) {
    return this.each(function() {
        var copyWith = $(_with).clone(true);
        var copyOrig = $(this).clone(true);
        $(_with).replaceWith(copyOrig);
        $(this).replaceWith(copyWith);
    });
};</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.cards{
  padding:10px;
  background-color:lightblue;
  display:inline-block;
  cursor:pointer;
  border-radius:5px;
}

#card-7S{
  background-color:lightgreen;
}
#card-9D{
  background-color:lightyellow;
}
#card-8H{
  background-color:lightgray;
}
#card-3D{
  background-color:lightpink;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;div class="main"&gt;
  &lt;div id="card-2d" class="cards" index="2"&gt;2D&lt;/div&gt;
  &lt;div id="card-7S" class="cards" index="4"&gt;7S&lt;/div&gt;
  &lt;div id="card-9D" class="cards" index="7"&gt;9D&lt;/div&gt;
  &lt;div id="card-8H" class="cards" index="10"&gt;8H&lt;/div&gt;
  &lt;div id="card-3D" class="cards" index="15"&gt;3D&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>You can also check here..
<a href="https://jsfiddle.net/nimittshah/7z3y8mb5/" rel="nofollow noreferrer">https://jsfiddle.net/nimittshah/7z3y8mb5/</a></p>


<p>I am trying to compare two values of different div classes using the data attribute.  I have multiple div classes like these two, all with different data-vale:</p>

<pre><code>&lt;div class="card" data-value=38&gt;
    &lt;img class ="front-face" src= "PNG/QH.png"/&gt;
  &lt;/div&gt;

  &lt;div class="card" data-value=39&gt;
    &lt;img class ="front-face" src= "PNG/KH.png"/&gt;
  &lt;/div&gt;
</code></pre>

<p>Every div class will also receive a unique order using cards.style.order</p>

<p>In a JS function the user will select two cards (firstCard,secondCard) and the function should check if the value of firstCard is one greater than the value of the card with order 1 more than secondCard.</p>

<p>Here is the code I have been trying to use:</p>

<pre><code>const cards = document.querySelectorAll('.card');

if(firstCard.dataset.value === cards[cards.indexOf(secondCard)-1].dataset.value)
</code></pre>

<p>cards is an array housing all of my div classes.  One of the errors I received told my that indexOf is not a usable function here.  I think this may be because the div classes are not actually part of an array and I need a different method to find the 'value of' something rather than the 'index of'.</p>

<p>For example, if a row of cards goes 2D,7S,9D,8H,3D,  the user can click 3D for firstCard and 7S for secondCard.  The function will verify that the value of 3D is one greater than 2D and will swap the positions of 3D and 7S.</p>


Indexing HTML div classes in JavaScript

jQuery

我尝试使用data属性比较不同div类的两个值。我有多个这样的div类，它们都有不同的data-vale：<div class="card" data-value=38>    <img class ="front-face" src= "PNG/QH.png"/>  </div>  <div class="card"...

问在JavaScript中索引HTML div类
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在JavaScript中索引HTML div类EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在JavaScript中索引HTML div类
EN