使用計算jQuery CSS寬度計算

Question

將我的頭髮拉出來試圖製作jQuery/CSS-calc場景後，獲取元素的寬度等於特定數值（32px）乘以輸入值[type =「數字「]字段，我最終放棄了。我在Calc聲明中使用正確的語法將元素的寬度存儲在變量&中時遇到了麻煩。

我最終完成了我所做的事情，即對條件語句中的CSS寬度值進行硬編碼，該條件語句對應於1-4中的每個值。雖然我得到它的工作，但它是絕對低效的&髒。我希望有人能夠向我展示一些更高效的替代方案，使用calc或其他需要更少代碼的結果來完成相同的結果。

綜上所述 - 當數量爲1時，目標元素span#dogFace的寬度爲32px。當數量爲2時，目標元素的寬度爲64px，依此類推。如果您嘗試將其增加到5，則會出現文字警告。

Here is the example I posted

任何意見讚賞！

獎勵積分：我最初試圖找到一個CSS-only解決方案，我認爲它仍然是可能的，但我無法完成它的工作。如果有人知道如何用一些花哨的CSS來實現這一點，我很想知道如何做到這一點。

$('#input_5_78').on('change', function() { 
 
    if (this.value >= 5) { 
 
     $('#dogFace').hide(); 
 
     $('#xtraDog').show(); 
 
    } else { 
 
     $('#dogFace').show(); 
 
     $('#xtraDog').show(); 
 
    } 
 

 
    if (this.value == 0) { 
 
     $('#dogFace').width('0'); 
 
     $('#xtraDog').hide(); 
 
    } else if (this.value == 1) { 
 
     $('#xtraDog').hide(); 
 
     $('#dogFace').width('32px'); 
 
    } else if (this.value == 2) { 
 
     $('#dogFace').width('64px'); 
 
     $('#xtraDog').hide(); 
 
    } else if (this.value == 3) { 
 
     $('#dogFace').width('96px'); 
 
     $('#xtraDog').hide(); 
 
    } else if (this.value == 4) { 
 
     $('#dogFace').width('128px'); 
 
     $('#xtraDog').hide(); 
 
    } 
 
})

.emoji { 
 
    height: 32px; 
 
    background-position: left top; 
 
    background-repeat: repeat-x; 
 
    background-size: contain; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
} 
 

 
.emoji.dog { 
 
    background-image: url('https://afeld.github.io/emoji-css/emoji/dog.png'); 
 
} 
 

 
#dogFace { 
 
    float: left; 
 
} 
 

 
#xtraDog { 
 
    display: none; 
 
} 
 

 
ul li.qtyField { 
 
    list-style-type: none; 
 
} 
 

 
.qtyField label { 
 
    float: left; 
 
} 
 

 
.qtyField input[type="number"] { 
 
    float: left; 
 
    font-weight: bold; 
 
    font-size: 1.15em; 
 
    margin: 0 0 0 15px; 
 
    width: 45px!important; 
 
    text-align: center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <ul> 
 
    <li class="qtyField"> 
 
     <label class="gfield_label" for="input_5_78">How many dogs need training?</label> 
 
     <div class="ginput_container ginput_container_number"> 
 
     <input name="input_78" id="input_5_78" step="any" min="0" max="5" value="0" type="number"> 
 
     </div> 
 
     <div class="gfield_description"> 
 
     <span id="dogFace" class="emoji dog"></span> 
 
     <span id="xtraDog"><br><br>Woah, that's a lot of dogs!<br />Please call (480) 555-1234 to discuss your training needs.</span> 
 
     </div> 
 
    </li> 
 
    </ul> 
 
</form>

Answer 1

也許不可能只使用CSS，但是這將是真棒。以下是您嘗試的一些變體，它可以使代碼變得簡單易懂。

$('#input_5_78').on('change', function() { 
 
    if (this.value < 5) { 
 
    $('#xtraDog').hide(); 
 
    $('#dogFace').width(this.value * 32 + 'px'); 
 
    } else { 
 
    $('#dogFace').width('0'); 
 
    $('#xtraDog').show(); 
 
    } 
 
})

.emoji { 
 
    height: 32px; 
 
    background-position: left top; 
 
    background-repeat: repeat-x; 
 
    background-size: contain; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
} 
 

 
.emoji.dog { 
 
    background-image: url('https://afeld.github.io/emoji-css/emoji/dog.png'); 
 
} 
 

 
#dogFace { 
 
    float: left; 
 
} 
 

 
#xtraDog { 
 
    display: none; 
 
} 
 

 
ul li.qtyField { 
 
    list-style-type: none; 
 
} 
 

 
.qtyField label { 
 
    float: left; 
 
} 
 

 
.qtyField input[type="number"] { 
 
    float: left; 
 
    font-weight: bold; 
 
    font-size: 1.15em; 
 
    margin: 0 0 0 15px; 
 
    width: 45px!important; 
 
    text-align: center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <ul> 
 
    <li class="qtyField"> 
 
     <label class="gfield_label" for="input_5_78">How many dogs need training?</label> 
 
     <div class="ginput_container ginput_container_number"> 
 
     <input name="input_78" id="input_5_78" step="any" min="0" max="5" value="0" type="number"> 
 
     </div> 
 
     <div class="gfield_description"> 
 
     <span id="dogFace" class="emoji dog"></span> 
 
     <span id="xtraDog"><br><br>Woah, that's a lot of dogs!<br />Please call (480) 555-1234 to discuss your training needs.</span> 
 
     </div> 
 
    </li> 
 
    </ul> 
 
</form>

Answer 2

我去我的回答方式略有不同。解釋包含在代碼片段中的JavaScript的一些指針和註釋;

• 想要了解編寫函數以運行可重複代碼的習慣。再次
• 縮進你的代碼和評論以供日後參考和可讀性
• 縮進你的CSS，使其可讀，這也將有助於人們協助您未來的答案

JS斌在這裏：http://jsbin.com/vunajej/edit?html,css,js,output

片段在這裏：

var validate_num_dogs = function (e) { // Declare function with variable e for element ;) 
 
     
 
     $('#xtraDog').hide(); // Hide warning msg each time the function is called 
 
     
 
     // For simple conditionals it's not required to use braces {} 
 
     if (e.val() >= 5) // If elements value is greater than or == to 5 (max) 
 
      $('#xtraDog').show(); // Display warning msg 
 
    
 
     else 
 
      $('#dogFace').width(32 * e.val()); // Width value is simply 32px multiplied by input value 
 
    
 
     }; 
 

 

 
jQuery(document).ready(function($) { 
 
    
 
    $('#input_5_78').on('change', function(){ 
 
     
 
    validate_num_dogs($(this)); // Call function, $(this) is the current element e.g. #input_5_78 
 

 
    }); 
 
         
 
});

.emoji { 
 
    height:32px; 
 
    background-position:left top; 
 
    background-repeat:repeat-x; 
 
    background-size:contain; 
 
    display:inline-block; 
 
    vertical-align:top; 
 
} 
 

 
.emoji.dog { 
 
    background-image:url('https://afeld.github.io/emoji-css/emoji/dog.png'); 
 
} 
 

 
#dogFace { 
 
    float: left; 
 
} 
 

 
#xtraDog { 
 
    display: none; 
 
} 
 

 
ul li.qtyField { 
 
    list-style-type: none; 
 
} 
 

 
.qtyField label { 
 
    float: left; 
 
} 
 

 
.qtyField input[type="number"] { 
 
    float: left; 
 
    font-weight: bold; 
 
    font-size: 1.15em; 
 
    margin: 0 0 0 15px; 
 
    width: 45px!important; 
 
    text-align: center; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
</head> 
 
<body> 
 

 
<form> 
 
<ul> 
 
\t <li class="qtyField"> 
 
\t \t <label class="gfield_label" for="input_5_78">How many dogs need training?</label> 
 
\t \t <div class="ginput_container ginput_container_number"> 
 
\t \t \t <input name="input_78" id="input_5_78" step="any" min="0" max="5" value="0" type="number"> 
 
\t \t </div> 
 
\t \t <div class="gfield_description"> 
 
\t \t \t <span id="dogFace" class="emoji dog"></span> 
 
\t \t \t <span id="xtraDog"><br><br>Woah, that's a lot of dogs!<br />Please call (480) 555-1234 to discuss your training needs.</span> 
 
\t \t </div> 
 
\t </li> 
 
</ul> 
 
</form> 
 

 
</body> 
 
</html>