クリックした要素のidがオブジェクト要素と等しい場合に要素を出力する

Question

表示された正しいアイコンの適切な入力を表示しようとしています。オブジェクトとしてすべての要素を構造化し、一致するアイコンのIDと一致するキーを作成しました。次に、一致する適切な入力に要素を作成しました。

私の問題は、アイコンをクリックしても何も出力されないことです。私はエラーが発生しない、私のconsole.logは私にループの結果を表示しています。

誰かが私が間違っているのを見ていますか？青色のZillowアイコンをクリックすると、プレースホルダ「Zillow」の入力が表示されます。 Realtorの入力/アイコンに関連付けられている以外は、Realtorのものと同じことです。

var reviewInputs = { 
 
    "zillow-review": '<input type="url" id="zillow-input" placeholder="Zillow">', 
 
    "realtor-review": '<input type="url" id="realtor-input" placeholder="Realtor">' 
 
}; 
 

 
$('.review-icon-select').click(function() { 
 
    $('#review-site-edit-wrap').addClass('active'); 
 
    var reviewIconClicked = $(this).attr('id'); 
 

 
    $.each(reviewInputs, function(key, element) { 
 
    console.log('key: ' + key + '\n' + 'value: ' + element); 
 
    if (reviewIconClicked == reviewInputs) { 
 
     reviewInputs.forEach(function(site) { 
 
     $('#review-site-edit').append.reviewInputs[element]; 
 
     }); 
 
    } 
 
    }); 
 

 
    //$(reviewIconClicked':contains("SomeText")').each(function() { 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<li class="review-icon-select" id="zillow-review"><img src="https://s3.amazonaws.com/retain-static/www/zillow.jpg" alt="Zillow"></li> 
 
<li class="review-icon-select" id="realtor-review"><img src="https://s3.amazonaws.com/retain-static/www/realtor.com.png" alt="Realtor.com"></li> 
 
<div id="review-site-edit"></div>

Answer 1

を試してみてください。

ループは必要ありません。

var reviewInputs = { 
 
    "zillow-review": '<input type="url" id="zillow-input" placeholder="Zillow">', 
 
    "realtor-review": '<input type="url" id="realtor-input" placeholder="Realtor">' 
 
}; 
 

 
$('.review-icon-select').click(function() { 
 
    //$('#review-site-edit-wrap').addClass('active'); // Maybe used... 
 
    var reviewIconClicked = $(this).attr('id'); 
 
    
 
    if(reviewInputs.hasOwnProperty(reviewIconClicked)){ 
 
    $('#review-site-edit').find("input[type='url']").remove(); 
 
    $('#review-site-edit').append(reviewInputs[reviewIconClicked]); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<li class="review-icon-select" id="zillow-review"><img src="https://s3.amazonaws.com/retain-static/www/zillow.jpg" alt="Zillow"></li> 
 
<li class="review-icon-select" id="realtor-review"><img src="https://s3.amazonaws.com/retain-static/www/realtor.com.png" alt="Realtor.com"></li> 
 
<div id="review-site-edit"></div>

Answer 2

代わりの

if (reviewIconClicked == reviewInputs) { 

を使ってあなただけクリックされた要素のidは、オブジェクトのプロパティであるかどうかを確認する必要があり

reviewInputs['reviewIconClicked']