當兩個選項都不顯示時隱藏2個跨度

當我選擇了單選按鈕'Up'時，它將顯示'productionUp'跨度，當選擇單選按鈕'down'時，'productionUp'將隱藏， 'productionDown'跨度將顯示。當兩個選項都不顯示時隱藏2個跨度

當'Same'被選中時，我希望既可以隱藏，但我不確定我所做的是否是最有效的方式。下面是HTML代碼

<fieldset> 
     <legend>Production</legend> 
     <p>Was your production level in October versus September 2013....</p> 
     <input type="radio" name="production-level" value="Up">Up<br /> 
     <input type="radio" name="production-level" value="Same">Same<br /> 
     <input type="radio" name="production-level" value="Down">Down 
     <p>Note: PRODUCTION level meaning the level of overall production this month measured in units as compared to last month.</p> 

     <span id='productionUp' class='level'> 
      <p>Production - Reasons why it is up. Click as many as apply.</p> 
      <input type="checkbox" name="production-why-up" value="Increase in demand">Increase in demand <br/> 
      <input type="checkbox" name="production-why-up" value="Expected increase in demand">Expected increase in demand <br/> 
      <input type="checkbox" name="production-why-up" value="Fullfillment of past orders">Fulfillment of past orders <br/> 
      <input type="checkbox" name="production-why-up" value="Increased marketing activity">Increased marketing activity <br/> 
      Other: <input type="text" /> 
     </span> 

     <span id='productionDown' class='level'> 
      <p>Production - Reasons why it is down. Click as many as apply.</p> 
      <input type="checkbox" name="production-why-down" value="Decrease in demand">Decrease in demand <br> 
      <input type="checkbox" name="production-why-down" value="Expected Decrease in demand">Expected Decrease in demand <br/> 
      <input type="checkbox" name="production-why-down" value="Technical difficulties in production">Technical difficulties in production <br/> 
      <input type="checkbox" name="production-why-down" value="Shortage in raw materials">Shortage in raw materials <br/> 
      Others: <input type="text" /> 
     </span> 

    </fieldset>

的JavaScript代碼

$(document).ready(function(){ 

    // Production Level 
    $("input[name = 'production-level']").click(function() { 
     var production = $(this).val(); 
     var opposite = ''; 

     if(production == 'Up') { 
      opposite = 'Down'; 
      $("#production" + opposite).hide(); 
      $("#production" + production).show(); 
     } 
     else if (production == 'Down') { 
      opposite = 'Up'; 
      $("#production" + opposite).hide(); 
      $("#production" + production).show(); 
     } 
     else { 
      $("#productionUp").hide(); 
      $("#productionDown").hide(); 
     } 

    }); 
});

如果你把在這一個眼神，你會認爲我選擇了隱藏他們兩人即使一個已經隱藏，我不能想到任何其他方式有效地隱藏選定的一個。請指教。

else { 
    $("#productionUp").hide(); 
    $("#productionDown").hide(); 
}

來源

2014-01-29 Wax

使用兩個css類一個用於顯示和一個用於隱藏 –

它沒關係..它有什麼問題？你可以隨時檢查可見性，如果你想，但我不明白你爲什麼應該這樣做。 – Hardy

或者某種硬編碼的會做

else { 
if ($("#productionUp").css('display') == 'inline') { // where i've figured that display is turning inline and none. 
    $("#productionUp").hide(); 
} 
else if ($("#productionDown").css('display') == 'inline') { 
    $("#productionDown").hide(); 
} 
}

工作Fiddle

來源

2014-01-29 08:32:16

正是我所要求的。謝啦。 – Wax

試試這個：

$(document).ready(function(){ 
    // Production Level 
    $("input[name='production-level']").on('change', function() { 
     var production = this.value; 
     if(production == 'Up') { 
      $(this).closest('fieldset').find(".level").hide(); 
      $("#production" + production).show(); 
     } else if (production == 'Down') { 
      $(this).closest('fieldset').find(".level").hide(); 
      $("#production" + production).show(); 
     } else { 
      $(this).closest('fieldset').find(".level").hide(); 
     } 
    }); 
});

嘗試用.level類名是常見的兩種，並顯示隱藏，你正在做，但細微的變化是使用change事件，而不是click。

來源

2014-01-29 08:19:20 Jai

我有很多類似這樣的問題，其中名爲'level'的類聲明爲從頭開始隱藏，使用它可能會影響其他使用相同類的問題的其他元素。你願意讓我爲每個問題創建獨特的類來聲明爲隱藏嗎？我只想澄清這是否是最有效的方法。 – Wax

在你的情況下，你可以使用'.closest（）'方法在選定的上下文中找到你的類。 – Jai

謝謝你的男人。所以最接近的是基本上找到最接近或可能在最接近的字段集中的類「級別」。請糾正我，如果我錯了，我仍然在Jquery – Wax

顯示隱藏單選跨度點擊

$('.level').hide(); 
$('input[name=production-level]').on('click', function() { 
    var value = $(this).attr('value'); 
    if (value == 'Same') { 
     $('.level').hide(); 
    } else { 
     $('.level').hide(); 
     $('#production' + value).show(); 
    } 
});

見this

來源

2014-01-29 08:28:20 HTTP

爲什麼不直接使用CSS？

input[value="Up"]:checked ~ #productionDown { 
    display: none; 
}

如果您需要IE8和更低的支持（不知道僞類選擇:checked，你可以切換類.checked爲您的單選按鈕與jQuery/vanillaJS。

.checked ~ #productionDown { 
    display: none; 
}

這裏的example。

來源

2014-01-29 08:30:39 chrona

這不起作用。也許是因爲這些跨度是隱藏的，就像聲明開始一樣。 – Wax

當兩個選項都不顯示時隱藏2個跨度

回答

相關問題