PHPとCSS - 他のフィールドが入力されている場合は要素を隠す

Question

Wordpressでディーラーロケータを編集していますが、いくつかのフィールドを変更する必要があります。 私は、他のフィールドが記入されている場合、フィールドを非表示にする必要があり

シナリオ：。

をユーザーがアドレス欄に記入し、空白のアドレス2のフィールドを離れた場合、要素のアドレスを示しています。 私はその部分を解決しましたが、今私は次の部分に苦労しています。ユーザーがアドレス2欄に記入した場合は、アドレス2を示し、住所

に私が今使っているコードを非表示にする必要があります。

function custom_listing_template() { 

global $wpsl, $wpsl_settings; 

$listing_template = '<li class="my_change_list" data-store-id="<%= id %>">' . "\r\n"; 

$listing_template .= "\t\t" . '<div class="locator_wrap_left">' . "\r\n"; 
$listing_template .= "\t\t" . '<div class="locator_title">' . "\r\n"; 
$listing_template .= "\t\t\t\t" . wpsl_store_header_template('listing') . "\r\n"; 
$listing_template .= "\t\t" . '</div>' . "\r\n"; 
$listing_template .= "\t\t" . '<div class="locator_left">' . "\r\n"; 
$listing_template .= "\t\t\t" . '<p><%= thumb %>' . "\r\n"; 

$listing_template .= "\t\t\t\t" . '<span class="wpsl-street street1"><%= address %></span>' . "\r\n"; 
$listing_template .= "\t\t\t\t" . '<% if (address2) { %>' . "\r\n"; 
$listing_template .= "\t\t\t\t" . ' <span class="wpsl-street street2"><%= address2 %></span>' . "\r\n"; 
$listing_template .= "\t\t\t\t" . '<% } %>' . "\r\n"; 
$listing_template .= "\t\t\t\t" . '<span>' . wpsl_address_format_placeholders() . '</span>' . "\r\n"; 
$listing_template .= "\t\t\t\t" . '<span class="wpsl-country"><%= country %></span>' . "\r\n"; 
$listing_template .= "\t\t\t" . '</p>' . "\r\n"; 
$listing_template .= "\t\t" . '</div>' . "\r\n"; 

私は次のことを試してみましたが、助けていないようです！

document.getElementById('street1').style.display = 'none'; 

EDIT：私は今、それはPHPファイルですので、JavaScriptを避けるためにしようとしています。

Answer 1

street1は、idではなく、classの要素です。

var street1 = document.getElementsByClassName('street1'); 
 

 
for (var x = 0; x < street1.length; x++) { 
 
    street1[x].style.display = 'none'; 
 
}

<span class='street1'>elem 1</span> 
 
<span class='street1'>elem 2</span> 
 
<span class='street1'>elem 3</span> 
 
<span class='street1'>elem 4</span>

とJSFIDDLEを：あなたが代わりにdocument.getElementById('street1').style.display = 'none';

のdocument.getElementsByClassName('street1').style.display = 'none';を使用する必要が

はまた、あなたがそれらを隠すことができるように、すべての要素を反復しなければなりません。 street1として

Answer 2

使用

var eles = document.getElementsByClassName('street1'); 
for(var i=eles.length; ele--;) ele[i].style.display = 'none'; 

代わりに

document.getElementById('street1').style.display = 'none'; 

クラスないIDとgetElementsByClassName複数の要素を返しています。

Answer 3

ここには、2つのコントロールの例があります。1つを入力すると、ヒーターが表示されます。

JSfiddle example

何をしてplaceholder-shownセレクタを使用しています。表示したくない場合は、プレースホルダに空白を付けることができます。

これはコードである：

HTML：

<input type="text" id="aa" placeholder=" "> 
    <input type="text" id="bb"> 

CSS：

#aa:placeholder-shown ~ #bb{ 
display:none; 
}