【解決方法】次の jquery コードを typescript に変換します

[ad_1]

$(document).ready(function(){
$(‘#channelType’).on(‘change’, function() {
if ( this.value == ‘1’)
{
$(“#internal”).show();
}
そうしないと
{
$(“#internal”).hide();
}
});
});

私が試したこと：

上記のjqueryスニペットをtypescriptに変更しようとしました

解決策 1

このコードにはいくつかの問題があります。まず、jQuery と JavaScript を混在させていることです。これは、私がここで話しているコンテキストです。たとえば、ここを参照してください。

JavaScript

$('#channelType').on('change', function() {
   if (this.value == '1')
   { // ...

this 使用する必要があるものを参照するために、jQuery オブジェクトではなく JavaScript オブジェクトを参照します。 $(this) 物体。したがって、他のすべてが問題なければ、jQueryで作業できるようにこれを解決できます。

JavaScript

$(document).ready(function(){
   $('#channelType').on('change', function() {
      if ($(this).val() == '1')
      {
          $("#internal").show();
      }
      else
      {
          $("#internal").hide();
      }
   });
});

これを機能させたい場合は、jQuery として機能するはずです。そうでない場合は、HTML から始めて、多くのことを変更する必要があります。おそらく、要素は選択要素であるため、次のようになります。

HTML

<select id="channelType" onchange="channelChanged();">
   <!-- Internal content -->
</select>

次に、JavaScript のどこかに、次の関数を記述して、その要素の値の変更を処理します。

JavaScript

function channelChanged() {
    // We can also pass this to the function
    var channelType = document.getElementById("channelType");
    var internalObject = document.getElementById("internal");

    // Change the display of the element.
    if(channelType.value == '1') {
        internalObject.style.display = 'block';
    } else {
        internalObject.style.display = 'none';
    }
}

しかし、繰り返しますが、これはあなたが使いたいものですか？ 🙂

onchange イベントの詳細については、こちらをご覧ください。オンチェンジ – Mozilla | MDN[^]

[ad_2]