<input type="radio">から直接valueを取得する

<input type="radio">から直接valueを取得する

- 2月 08, 2020

jQuery is fun!_2 <input type="radio">から直接valueを取得する $("input:text").val()

<body>
      <form id="filterCSS">
    <input type="radio" name="filter" value="blur(10px)" onchange="filterI(this)">blur(10px)<br>
    ~~~~~
 <script> 
 $(document).ready(function(){
   $('#filterCSS > input[name="filter"]').change(function(){
    var result = $(this).val();
    $("#pizza").css("filter", result);
    $("#P1").text(result);
  });
 });

 /*function filterI() {
  var x = document.getElementById("#filterCSS");
  var y = x.filter;
  var i;
  for (i of x ){
  document.getElementById("pizza").style.filter = y[i].value;
}
}
function filterI() {
  var i;
  var x = document.getElementById("#filterCSS");
  var y = x.attributes;

  document.getElementById("P2").innerHTML = x[i].y[i].value;

}
  /*
  $(document).ready(function(){
    $("#filterCSS > input").click(function(){
      $("#pizza").css("filter", function(){
        var x = $("filterCSS > input");
        var i;
        for (i = 0; i < x.length; i++) {
          return x[i].value;
        }
      });
    });
  }); */

play it のようにしたかった。侍エンジニア塾ブログが直接 radio から.css("filter", value)に落とし込むのに参考になった。
selector .val() .text()

.val() syntax

$(selector).val
$(selector).val(value)
$(selector).val(function(index, currentvalue))

.val() のtry it.val(function(n, c)) の nがindex c がcurrentvalue cがないとNaNが return。 jQuery DOM manipulation

object attributes やHTML DOM .value から onchange でも出来るのかな？ tag id classのどれかから指定し index numberを loopさせて...とは出来るが直接number で...ぁぁ複雑
<select> <option> から直にvalue を取得してくるのは書けた気がする。

HTML input type <input type="radio"> name="something" は揃えないと一つだけselectしたことにならない。 value=""が変化してもいいattribute
< input type="checkbox" name="something" でname を異なる値・stringにしておけばmuliple choicesになる。

<input type="range"> からのfilter: blur(xpx); への落とし込み

    $(document).ready(function(){
    $("#BPractice").change(function(){
      var x = $(this).val();
      var result = "blur(" + x + "px)";
      $("#pizza1").css("filter",result);
      $("#P3").text(x);
     });
    });

<input> attribute: width="px" は<input type="img">にしか効かない。 size="charactor number"
HTML DOM input range object

↑ document.forms.R.range2.value 名前で取得

  <input type="range" name="range1" onchange="rangeFunction()">
  <script>
  function rangeFunction() {
    var x = document.getElementsByTagName("input").namedItem("range1");
    document.getElementById("P4").innerHTML = x.value;
  }

DOM で取得
getElementsByTagName("input").namedItem("range1")

input name="range1" でも取得出来る。

↑ shorthand: getElementsByTagName("input")["range1"]

pizza

pizza

  //click image href="#pizza3"
  <a href="#pizza3"><img src="URL" attirbutes></a>

  <style type="text/css">
  img.background {
    width:100%;
    height: 100%;
    position: absolute;
    left:0px;
    top: 0px;
    z-index: 0; // background-color が-1 に来るので 0に設定
    filter: blur(40px);
  }
  img.circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate( -50%, -50%);
    border-radius: 50%;
    display: block;
    margin: 0 auto;
    height: auto;
    max-width: 50%
  }
</style>

<div style="position: relative;">
<img class="background" src="https://i.imgur.com/wCnb1bo.png" alt="pizza" width="300" height="300">
<img class="circle" src="https://i.imgur.com/wCnb1bo.png" alt="pizza" width="300" height="300">

img widht height を同じ値に指定。background に来る方にはCSS position: absolute; left: 0px; top: 0px; z-index: -1/0;
circle にする方は border-radius: 50%;
display: block; と margin: 0 auto;で真ん中に。
更に、位置を修正するためにHero image を使って.circle を真ん中に。

コメント