Question

我正在制作评级反馈表单，我一直试图获取我的单选按钮值，如果它是<= 3，则必须附加问题1，否则（<= 5）必须附上问题2。

我一直在努力获取价值和追加功能，我无法知道下面我遗漏的地方是我的html和jquery代码。

编辑：谢谢Rino Raj现在的想法很好。

编辑：谢谢Acharki Star逆是我的错误，我已经使用remove（）对div进行了重复排序编辑：我接受你的回答Mr.Rino raj

HTML

<fieldset class="rating">
    <h2>Rate the videos</h2>
    <input type="radio" id="star5" name="rating" value="1" /><label for="star5" title="Rocks!">5 stars</label>
    <input type="radio" id="star4" name="rating" value="2" /><label for="star4" title="Pretty good">4 stars</label>
    <input type="radio" id="star3" name="rating" value="3" /><label for="star3" title="Meh">3 stars</label>
    <input type="radio" id="star2" name="rating" value="4" /><label for="star2" title="Kinda bad">2 stars</label>
    <input type="radio" id="star1" name="rating" value="5" /><label for="star1" title="Sucks big time">1 star</label>
</fieldset>

的jQuery

$(document).ready(function () {

    $('.rating input[name="rating"]').on('click', function () {

        var n = $('.rating input[name="rating"]:checked').val();
        alert('hi');


        if (n <= 3) {
            $('fieldset').append("<div>Question1</div>");
        }
        if (n <= 5) {
            $('fieldset').append("<div>Question2</div>");
        }
    });
});

Answer 1

<强> Forms Authentication Timeout Logging

$username = $_GET["user"];
$password = $_GET["passwd"];

$pdo = new PDO("mysql:host=$dbhost;dbname=$dbname;charset=utf8", $dbusername, $dbpassword, array(
  PDO::ATTR_ERRMODE=>PDO::ERRMODE_EXCEPTION // ....since there is no further error handling in the script
));

$stmt = $pdo->prepare("SELECT username, password, loginreqkey, banned FROM users WHERE username=:username");
$stmt->bindParam(':username', $username);
$stmt->execute();
$result = $stmt->fetch(PDO::FETCH_ASSOC);
if ($result && password_verify($password, $result['password'])) {
    echo json_encode [
        "state" => "success",
        "loginreqkey" => $result['loginreqkey'],
        "banstatus" => $result['banned'],
    ];
}

所做的更改

►更正了HTML输入中的值

►点击功能

中的

$('.rating input[name="rating"]').on('click', function() {
  var n = $('.rating input[name="rating"]:checked').val();
  alert(n);
  if (n <= 3) {
    $('fieldset').append("<div class='newbox'>Question1</div>");
  } else {
    $('fieldset').append("<div class='newbox'>Question2</div>");
  }
});

和if

Answer 2

<强> Working Fiddle

不确定为什么你的星星会被反转？您应该在代码中添加else语句，它将起作用：

$('.rating input[name="rating"]').on('click', function() {
  var n = $(this).val();        

  $newBox = $('.newbox');
  if (n <= 3) {
    $newBox.html("<div class='newbox'>Question1</div>");
  }else if(n <= 5) {
    $newBox.html("<div class='newbox'>Question2</div>");
  }
});

注意：为避免div重复，您可以在HTML代码中修复它，然后根据所选的费率将文本附加到其中。

希望这有帮助。

$('.rating input[name="rating"]').on('click', function() {
  var n = $('.rating input[name="rating"]:checked').val();        

  if (n <= 3) {
    $('.newbox').html("Question1</div>");
  }else{
    $('.newbox').html("<div class='newbox'>Question2</div>");
  }
});

    fieldset {outline:none;border:none; }
    .rating {
     float:left;
}

/* :not(:checked) is a filter, so that browsers that don’t support :checked don’t 
   follow these rules. Every browser that supports :checked also supports :not(), so
   it doesn’t make the test unnecessarily selective */
.rating:not(:checked) > input {
    position:absolute;
    top:-9999px;
    clip:rect(0,0,0,0);
}

.rating:not(:checked) > label {
    float:right;
    width:1em;
    padding:0 .1em;
    overflow:hidden;
    white-space:nowrap;
    cursor:pointer;
    font-size:200%;
    line-height:1.2;
    color:#ddd;
    text-shadow:1px 1px #bbb, 2px 2px #666, .1em .1em .2em rgba(0,0,0,.5);
}

.rating:not(:checked) > label:before {
    content: '★ ';
}

.rating > input:checked ~ label {
    color: #f70;
    text-shadow:1px 1px #c60, 2px 2px #940, .1em .1em .2em rgba(0,0,0,.5);
}

.rating:not(:checked) > label:hover,
.rating:not(:checked) > label:hover ~ label {
    color: gold;
    text-shadow:1px 1px goldenrod, 2px 2px #B57340, .1em .1em .2em rgba(0,0,0,.5);
}

.rating > input:checked + label:hover,
.rating > input:checked + label:hover ~ label,
.rating > input:checked ~ label:hover,
.rating > input:checked ~ label:hover ~ label,
.rating > label:hover ~ input:checked ~ label {
    color: #ea0;
    text-shadow:1px 1px goldenrod, 2px 2px #B57340, .1em .1em .2em rgba(0,0,0,.5);
}

.rating > label:active {
    position:relative;
    top:2px;
    left:2px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset class="rating">
  <h2>Rate the videos</h2>
  <input type="radio" id="star1" name="rating" value="5" /><label for="star1" title="Sucks big time">1 star</label>
  <input type="radio" id="star2" name="rating" value="4" /><label for="star2" title="Kinda bad">2 stars</label>
  <input type="radio" id="star3" name="rating" value="3" /><label for="star3" title="Meh">3 stars</label>
  <input type="radio" id="star4" name="rating" value="2" /><label for="star4" title="Pretty good">4 stars</label>
  <input type="radio" id="star5" name="rating" value="1" /><label for="star5" title="Rocks!">5 stars</label>
  <br>
  <div class='newbox'></div>
</fieldset>

检查单选按钮值并附加div

2 个答案: