كيفية مقارنة كيان html مع jQuery
-
09-06-2019 - |
سؤال
لدي كود html التالي:
<h3 id="headerid"><span onclick="expandCollapse('headerid')">⇑</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.
المحلول
عندما يتم تحليل 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");
}
}
نصائح أخرى
إذا قمت بتنبيه 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) ? "⇑" : "⇓" );
};
استخدم فئة للإشارة إلى الحالة الحالية للامتداد.يمكن أن يبدو HTML بهذا الشكل
<h3 id="headerId"><span class="upArrow">⇑</span>Header title</h3>
ثم في جافا سكريبت تفعله
$( '.upArrow, .downArrow' ).click( function( span ) {
if ( span.hasClass( 'upArrow' ) )
span.text( "⇓" );
else
span.text( "⇑" );
span.toggleClass( 'upArrow' );
span.toggleClass( 'downArrow' );
} );
قد لا تكون هذه هي الطريقة الأفضل، لكنها يجب أن تنجح.لم اختباره صعبة
تفحص ال .تبديل() تأثير.
هنا شيء مشابه كنت ألعب به سابقًا.
لغة البرمجة:
<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();
});
ربما لا تحصل على تطابق تام لأن المتصفح يستخدم أحرفًا صغيرة للكيان أو شيء من هذا القبيل.حاول استخدام القيراط (^) والحرف الصغير "v" للاختبار فقط.
تم التعديل - كانت نظريتي الأولى خاطئة تمامًا.