質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.78%

【html & jQuery】配列とstring型の比較ができない

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 433

score 37

分からないこと

htmlの配列データに対してtextContentを用いて取得した値を、String型の配列と比較していますが、値が一致しているはずなのにtrueになってくれません。

分かりづらいと思うので例を示します

<div class= content>
  <a class= content__letter>a</a>
</div>
<div class= content>
  <a class= content__letter>b</a>
</div>
<div class= content>
  <a class= content__letter>1</a>
</div>
<div class= content>
  <a class= content__letter>2</a>
</div>
function comparison(letter){
  const array = ["a", "c", "1", "3"]
  var result = ""

  if (array.includes(letter)){
    result = letter
  }

  return result
}
function main_function(){
  var letter
  $(".content__letter").each(function (i, element){
    letter = element.textContent
    result = comparison(letter)
    console.log(result)
  }
}


jQueryのmain_functionが呼び出された時の動作として、ブラウザのコンソールにすべてresult=""のまま表示がなされます。

これはfunctionのcomparison中のif文の条件が常にfalseとなっていることから発生しています・
letterの中には、arrayに含まれる"a"や"1"があるにも関わらず、すべてfalseとなるのは、なぜでしょうか?

仮説と検証

変数の型が一致していない?

$.type()にて変数letterとarrayの要素の一部の型を調べました。
どちらもstringとなっていました。

実際に文字列と比較できる?

console.log(letter == "a")

を記述しました。
結果、eachの繰り返し中すべてfalseでした。

console.log(letter == "1")

のときも同様。

ただし

console.log(letter == 1)

のときなぜかletterに"1"が代入している周でtrueとなりました。
string型となっていたのになぜ?
配列の値を数字に数字の比較はできそうです。
が、アルファベットの方も比較したいので原因はまだ追求する必要があります。

textContentで取得した値は何か特殊な型となるのでしょうか?
もしくは、代替案ございましたら教えていただけると幸いです。

よろしくお願いいたします。

その他

開発環境

  • OS macOS Catalina (10.15.4)
  • VScode (1.45)

言語・gemのバージョン

  • ruby 2.5.1p57
  • rails (5.2.4.2)
  • haml (5.1.2)
  • haml-rails (2.0.1)
  • mysql2 (0.5.3)
  • sass (3.7.4)
  • sass-rails (5.1.0)
  • jquery-rails (4.4.0)

ソースファイル

$(function () {
  function chord_display_relative(letter) {
    // 略
  }

  //これがeach文の中で呼び出される関数です
  function chord_display_absolute(key, letter, last_letter) {

    if (/#|b|m/.test(key)) {
      minor_flag = 1;
      key = key.replace("m", "");
    }

    const absolute_note_other_array = [
      "Ab",
      "A#",
      "B#",
      "Cb",
      "D#",
      "E#",
      "Fb",
      "Gb",
    ];
    var key_index = absolute_note_other_array.indexOf(key);
    if (key_index == 0) {
      key = "G#";
    } else if (key_index == 1) {
      key = "Bb";
    } else if (key_index == 2) {
      key = "C";
    } else if (key_index == 3) {
      key = "B";
    } else if (key_index == 4) {
      key = "Eb";
    } else if (key_index == 5) {
      key = "F";
    } else if (key_index == 6) {
      key = "E";
    } else if (key_index == 7) {
      key = "F#";
    }
    const absolute_note_array = [
      "G",
      "G#",
      "A",
      "Bb",
      "B",
      "C",
      "C#",
      "D",
      "Eb",
      "E",
      "F",
      "F#",
      "G",
      "G#",
      "A",
      "Bb",
      "B",
      "C",
      "C#",
      "D",
      "Eb",
      "E",
      "F",
      "F#",
    ];

    key_index = absolute_note_array.indexOf(key);


  //const以下で定義されている配列が例のコードのarrayにあたります。
    const relative_note_array1 = ["1", "2", "3"];
    const relative_note_array2 = ["4", "5", "6", "7"];

    var changed_index;

    const symbol_should_not_changed = ["|", "m", "{", "}", "@", "$", "t"];

    const half_note_array = ["B", "b"];
    var previous_index;
    var previous_note;

    var delete_flag = 0;
    changed_index = 0;
  
  // 問題のifif (symbol_should_not_changed.includes(letter)) {
    } else if (relative_note_array1.includes(letter)) {
      changed_index = key_index + (letter * 2 - 2);
      letter = absolute_note_array[changed_index];
    } else if (relative_note_array2.includes(letter)) {
      changed_index = key_index + (letter * 2 - 3);
      letter = absolute_note_array[changed_index];
    } else if (half_note_array.includes(letter)) {
      previous_index = absolute_note_array.indexOf(last_letter);
      delete_flag = 1;
      if (letter == "B") previous_index = previous_index + 1;
      if (letter == "b") previous_index = previous_index - 1;
      if (previous_index == -1) {
        previous_index = absolute_note_array.length - 1;
        letter = absolute_note_array[previous_index];
      }
    } else {
      letter = "";
    }

    var output = new Object();
    output.letter = letter;
    output.delete_flag = delete_flag;
    return output;
  }

  //問題のメイン関数
  function chord_display(key) {
    var chord_text = $(".chord-display--text").text();

    $(".chord_text__chord_letter").each(function (i, element) {
      var letter = $(".chord_text__chord_letter")[i].textContent;

      var last_letter;
      if (i == 0) {
        last_letter = "";
      } else if (i > 0) {
        last_letter = $(".chord_text__chord_letter")[i - 1];
      }

      var letter = element;

      letter = letter.textContent;
      console.log(letter);

      var output;
      if (
        $(".key__key-display--relative-key").attr("style") == "display: flex;"
      ) {
        output = chord_display_relative(letter);
      } else if (
        $(".key__key-display--relative-key").attr("style") == "display: none;"
      ) {
        output = chord_display_absolute(key, letter, last_letter);
      } else {
        output = chord_display_absolute(key, letter, last_letter);
      }
      $(".chord_text__chord_letter")[i].textContent = output.letter;
    });
  }


続きは以下。ここから下で発火していますが、今回は余り関係がありません。

  function absolute_key(note_selected, key_now_state) {
    const symbols = ["#", "b"];
    if (symbols.includes(note_selected)) {
      if (/#|b|m/.test(key_now_state)) {
        key_now_state = key_now_state.slice(0, 8);
      }
      $(".key__key-display--now").text(key_now_state + note_selected);
    } else if (note_selected == "m") {
      if (/m/.test(key_now_state)) {
      } else {
        $(".key__key-display--now").text(key_now_state + note_selected);
      }
    } else {
      $(".key__key-display--now").text("key of " + note_selected);
    }
  }

  $(".key__key-display").on("touchend mouseup", function () {
    $(".chord-menu__key--palettes").show();
  });

  // 発火点
  $(".palettes__palette").on("touchend mouseup", function () {
    var note_selected = $.trim($(this).text());
    var key_now_state = $(".key__key-display--now").text();
    key_now_state = $.trim(key_now_state);
    if (note_selected == "閉じる") {
      $(".chord-menu__key--palettes").removeAttr("style");
    } else {
      if (note_selected == "移動ド") {
        $(".key__key-display--relative-key").css("display", "flex");
        key_for_registration("relative-key");
      } else {
        $(".key__key-display--relative-key").hide();
        absolute_key(note_selected, key_now_state);
        key_now_state = $(".key__key-display--now").text();

        key_for_registration(key_now_state);
      }
      chord_display(key_now_state);
    }
  });
  // 発火点2
  // ページ読み込み時の挙動
  $(document).ready(function () {
    var key_now_state = $(".key__key-display--now").text();
    key_now_state = $.trim(key_now_state);
    // absolute_key(note_selected, key_now_state);
    chord_display(key_now_state);
    key_for_registration(key_now_state);
  });

  function key_for_registration(key_now_state) {
    if ($("#key_name").get(0) != undefined) {
      $("#key_name").val(key_now_state);
    }
  }
});
.content__chord
  - @song.chords.each do |chord|
    - chord_array = chord.text.split(//)
    .chord_text
      - chord_array.each do |char|
        %a.font_base.chord_text__chord_letter{value: char}
          =char


↓変換後

<!-- each文で表示される例。 -->
<div class="chord_text">
  <a class="font_base chord_text__chord_letter" value="1">1</a>
  <a class="font_base chord_text__chord_letter" value="#">#</a>
  <a class="font_base chord_text__chord_letter" value="3">3</a>
  <a class="font_base chord_text__chord_letter" value="b">b</a>
</div>


他に必要な情報があれば教えて下さい。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • shota-imoto

    2020/05/21 08:51

    textContentを行った段階で謎のスペースが生じていました。
    具体的には
    a class="font_base chord_text__chord_letter" value="1">1</a>
    のときは取得値は"1 "
    trim()でカットしたらtrueが返ってくるようになりました。
    html上はスペースなどなかったので、なぜ紛れ込んだのかは謎です。

    ご対応ありがとうございました♪

    キャンセル

  • shota-imoto

    2020/05/21 08:53

    取得値、再度確認したら
    "
    1 "
    と改行が入っていました。

    キャンセル

  • kei344

    2020/05/21 09:00

    どのように解決したのかを回答文に書き、「解決済」にされてはいかがでしょうか。

    キャンセル

回答 1

check解決した方法

0

textContentを行った段階で謎のスペースが生じていました。
具体的には
a class="font_base chord_text__chord_letter" value="1">1</a>
のときは取得値は" (改行)1 "
trim()でカットしたらtrueが返ってくるようになりました。
html上はスペースなどなかったので、なぜ紛れ込んだのかは謎です。

簡易のコードを作って動作を確かめていただいたところスペースは発生せず動作しました。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.78%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る