كيفية مقارنة كيان html مع jQuery

Question

لدي كود html التالي:

<h3 id="headerid"><span onclick="expandCollapse('headerid')">&uArr;</span>Header title</h3>

أرغب في التبديل بين السهم لأعلى والسهم لأسفل في كل مرة ينقر فيها المستخدم على علامة الامتداد.

function expandCollapse(id) {   
    var arrow = $("#"+id+" span").html(); // I have tried with .text() too
    if(arrow == "⇓") {     
        $("#"+id+" span").html("⇑");               
    } else {        
        $("#"+id+" span").html("⇓");               
    }
}

وظيفتي تسير دائمًا في المسار الآخر.إذا قمت بإنشاء javacript: تنبيه لـ arrow المتغير أحصل على كيان html ممثلاً كسهم.كيف يمكنني إخبار jQuery بتفسير ملف arrow المتغير كسلسلة وليس كـ html.

Answer 1

عندما يتم تحليل HTML، ما يراه JQuery في DOM هو UPWARDS DOUBLE ARROW ("⇑")، وليس مرجع الكيان.وبالتالي، في كود جافا سكريبت الخاص بك يجب عليك اختباره "⇑" أو "\u21d1".تحتاج أيضًا إلى تغيير ما تقوم بالتبديل إليه:

function expandCollapse(id) {
    var arrow = $("#"+id+" span").html();
    if(arrow == "\u21d1") {     
        $("#"+id+" span").html("\u21d3");                           
    } else {            
        $("#"+id+" span").html("\u21d1");                           
    }
}

Answer 2

إذا قمت بتنبيه arrow ماذا يعود؟هل تقوم بإرجاع السلسلة الدقيقة التي تتطابق معها؟إذا كنت تحصل على الشخصيات الفعلية '⇓' و '⇑' قد تضطر إلى مطابقتها ضد "\u21D1" و "\u21D3".

أيضا، قد ترغب في المحاولة ⇑ و ⇓ نظرًا لعدم دعم جميع المتصفحات لتلك الكيانات.

تحديث:إليك مثال عملي بالكامل:http://jsbin.com/edogop/3/edit#html,live

window.expandCollapse = function (id) {   
  var $arrowSpan = $("#" + id + " span"),
      arrowCharCode = $arrowSpan.text().charCodeAt(0);

  // 8659 is the unicode value of the html entity
  if (arrowCharCode === 8659) {
    $arrowSpan.html("⇑");                           
  } else {            
    $arrowSpan.html("⇓");                           
  }

  // one liner:
  //$("#" + id + " span").html( ($("#" + id + " span").text().charCodeAt(0) === 8659) ? "⇑" : "⇓" );
};

Answer 3

استخدم فئة للإشارة إلى الحالة الحالية للامتداد.يمكن أن يبدو HTML بهذا الشكل

<h3 id="headerId"><span class="upArrow">&uArr;</span>Header title</h3>

ثم في جافا سكريبت تفعله

$( '.upArrow, .downArrow' ).click( function( span ) {
    if ( span.hasClass( 'upArrow' ) )
        span.text( "⇓" );
    else
        span.text( "⇑" );
    span.toggleClass( 'upArrow' );
    span.toggleClass( 'downArrow' );
} );

قد لا تكون هذه هي الطريقة الأفضل، لكنها يجب أن تنجح.لم اختباره صعبة

Answer 4

تفحص ال .تبديل() تأثير.

هنا شيء مشابه كنت ألعب به سابقًا.

لغة البرمجة:

<div id="inplace">
<div id="myStatic">Hello World!</div>
<div id="myEdit" style="display: none">
<input id="myNewTxt" type="text" />
<input id="myOk" type="button" value="OK" />
<input id="myX" type="button" value="X" />
</div></div>

النصي:

 $("#myStatic").bind("click", function(){
      $("#myNewTxt").val($("#myStatic").text());
      $("#myStatic,#myEdit").toggle();
 });
 $("#myOk").click(function(){
      $("#myStatic").text($("#myNewTxt").val());
      $("#myStatic,#myEdit").toggle();
 });
 $("#myX").click(function(){
      $("#myStatic,#myEdit").toggle();
 });

Answer 5

ربما لا تحصل على تطابق تام لأن المتصفح يستخدم أحرفًا صغيرة للكيان أو شيء من هذا القبيل.حاول استخدام القيراط (^) والحرف الصغير "v" للاختبار فقط.

تم التعديل - كانت نظريتي الأولى خاطئة تمامًا.