Question

我想问一下，如果我有一个由无序列表创建的大小选择器，如下图所示。我也写了一些编码，但似乎它们没有用。目前它们不是可点击的，我可以通过配置其CSS来将边框设置为选定的边框。

<script>
$(function(){
$(“#selected_1").on("click", function(){
    $("main li.s-attribute li.s-value").css("border-color:#2D4274;");})})
</script>

        <li class="s-value">
            <a href=“#” title=“size : 1” class=“size-anchor" id="selected_1">1</a>
        </li>

        <li class="s-value">
            <a href=“#" title="size : 2" class="size-anchor">2</a>
        </li>

        <li class="s-value">
            <a href=“#" title="size : 3" class="size-anchor">3
            </a>
        </li>

        <li class="s-value">
            <a href=“#" title="size : 4" class="size-anchor">4</a>
        </li>

        <li class="s-value">
            <a href=“#" title="size : 5" class="size-anchor">5</a>
        </li>

        <li class="s-value">
            <a href=“#" title="size : 6" class="size-anchor">6</a>
        </li>

        <li class="s-value">
            <a href=“#" title="size : 7" class="size-anchor">7</a>
        </li>

所以我想知道如何配置它们以使它们可点击，同时当我点击它时，将显示相应的数字，即SIZE - （Clicked） - ＆gt;尺寸：4 ??感谢

Answer 1

在此代码段中显示文字（当您点击li时），我正在使用它的标题属性并将h1的文字设置为等于它。

点击的li将会class="active"，您可以更改它的CSS。

$(".s-value a").click(function(){
  var heading =  $(this).attr("title"); //showing the size in h1
  $("#showcase").text(heading);

  var liIt = $(this).parent();          //Adding the class active to the clicked li
  $(".s-value").removeClass("active");
  $(liIt).addClass("active");
});

.s-value{
  padding:0;
  margin:5px;
  border:1px solid Green;
  float:left;
  list-style-type:none;
}
.s-value a{
  display:block;
  padding:5px;
}
.s-value.active a{
  background-color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="s-value">
  <a href="#" title="size : 1" class="size-anchor" id="selected_1">1</a>
</li>
<li class="s-value">
  <a href="#" title="size : 2" class="size-anchor" id="selected_2">2</a>
</li>
<li class="s-value">
  <a href="#" title="size : 3" class="size-anchor" id="selected_3">3</a>
</li>
<li class="s-value">
  <a href="#" title="size : 4" class="size-anchor" id="selected_4">4</a>
</li>

<h1 id="showcase"></h1>

Answer 2

试试这个。添加单击事件并将类添加到目标元素，获取所选选项卡的title属性。这里添加了示例代码。我在这里使用了一种花哨的字体来表示。我还有用户inner border而不是外边框。内部边界将导致内容分为两行。

<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <link href='http://fonts.googleapis.com/css?family=Merienda+One' rel='stylesheet' type='text/css'>
    <style>
        .selected {
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            border: 3px solid #6b6b6b;
        }
        
        .s-value {
            width: 100px;
            float: left;
            margin: 5px;
            height: 70px;
            display: table;
        }
        
        .s-value a {
            font: 200 40px/1.2 'Merienda One', Helvetica, sans-serif;
            color: rgba(0, 0, 0, 0.7);
            text-shadow: 3px 3px 3px #fff;
            display: table-cell;
            vertical-align: middle;
            text-align: center;
            text-decoration: none;
            background: #e2e2e2;
        }
        
        #SelectedSize {
            font: 200 40px/1.2 'Merienda One', Helvetica, sans-serif;
            text-transform: uppercase;
            font-size: 25px;
            height: 50px;
        }
    </style>
</head>

<body>
    <script>
        $(function () {
            $(".size-anchor").on("click", function (evt) {
                var selectedSize = $(this).attr("title"); 
                $("#SelectedSize").text(selectedSize);
                var liIt = $(this).parent();
                $(".s-value").removeClass("selected");
                $(liIt).addClass("selected");
            })
        })
    </script>
    <div id="SelectedSize"> </div>

    <li class="s-value">
        <a href="#" title="size : 1" class="size-anchor" id="selected_1">1</a>
    </li>

    <li class="s-value">
        <a href="#" title="size : 2" class="size-anchor">2</a>
    </li>

    <li class="s-value">
        <a href="#" title="size : 3" class="size-anchor">3
            </a>
    </li>

    <li class="s-value">
        <a href="#" title="size : 4" class="size-anchor">4</a>
    </li>

    <li class="s-value">
        <a href="#" title="size : 5" class="size-anchor">5</a>
    </li>

    <li class="s-value">
        <a href="#" title="size : 6" class="size-anchor">6</a>
    </li>

    <li class="s-value">
        <a href="#" title="size : 7" class="size-anchor">7</a>
    </li>
</body>

</html>

Answer 3

您可以使用jquery添加CSS。我用divs做了一个小片段

$('.s-value').click(function() {
  $(this).parent().find('.s-value').css('border', '0px solid black');
  $(this).css('border', '1px solid black');
});

.s-value{
  padding: 10px;
  width: 80px;
  margin: 5px;
  display: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="s-parent">
<div id="s-value" class="s-value">
  1
</div>
  <div id="s-value" class="s-value">
  2
</div>
  <div id="s-value" class="s-value">
  3
</div>
  </div>

Answer 4

$(document).ready(function(){
  $(".s-value").each(function(){
    $(this).on('click',function(){
      // value which is selected
      console.log($(this).find('.size-anchor').text());
      
    });
  })
})

ul{
  width:100%;
  list-style-type:none;
  padding:0;
}
ul li{
  width:25%;
  display:inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
</head>
<body>  
<ul>  
<li class="s-value">
    <a class="size-anchor">1</a>
</li>
<li class="s-value">
    <a class="size-anchor">2</a>
</li>
<li class="s-value">
    <a class="size-anchor">3</a>
</li>
<li class="s-value">
    <a class="size-anchor">4</a>
</li>
<li class="s-value">
    <a class="size-anchor">5</a>
</li>
<li class="s-value">
    <a class="size-anchor">6</a>
</li>
<li class="s-value">
    <a class="size-anchor">7</a>
</li>
<li class="s-value">
    <a class="size-anchor">8</a>
</li>
</ul>  
</body>
</html>

Answer 5

尝试使用class属性。虽然希望这可行，但仍然会纠正css部分：

<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="   crossorigin="anonymous"></script>
    <script>



$(function(){
        $(".selectsize").on("click", function(e){
            alert($(this).attr('title'));
            $("main li.s-attribute li.s-value").css("border-color:#2D4274;");
        });
    });
</script>

            <li class="s-value">
                <a href="#" title="size : 1" class="size-anchor selectsize">1</a>
            </li>

            <li class="s-value">
                <a href="#" title="size : 2" class="size-anchor selectsize" >2</a>
            </li>

            <li class="s-value">
                <a href="#" title="size : 3" class="size-anchor selectsize">3
                </a>
            </li>

Answer 6

在锚标签或li tag.Pass id上添加onclick()函数，然后根据id显示大小。

function func(id){
if(id=="selected_1"){
alert("SIZE — (Clicked) —> SIZE : 4");
}
}

或者如果您不想使用if condition

function func(id){
        var msg= $("selected_1").title();
alert(msg);
        }

Answer 7

由于您使用的是JQuery，因此以下代码应该适用于可点击列表：

<span class="anchor-list-title">SIZE</span>
  <ul>
    <li class="s-value">
      <a href="#" title="size : 1" class="size-anchor" id="selected_1">1</a>
    </li>

    <li class="s-value">
      <a href="#" title="size : 2" class="size-anchor">2</a>
    </li>

    <li class="s-value">
      <a href="#" title="size : 3" class="size-anchor">3</a>
    </li>

    <li class="s-value">
      <a href="#" title="size : 4" class="size-anchor">4</a>
    </li>

    <li class="s-value">
      <a href="#" title="size : 5" class="size-anchor">5</a>
    </li>

    <li class="s-value">
      <a href="#" title="size : 6" class="size-anchor">6</a>
    </li>

    <li class="s-value">
      <a href="#" title="size : 7" class="size-anchor">7</a>
    </li>
  </ul>

  <script>
    $(function () {
      var $anchorListTitle = $('.anchor-list-title');

      // Set the css to #selected_1
      var $selectedAnchor = $('#selected_1');
      $selectedAnchor.css('border', '1px solid red'); // http://api.jquery.com/css/

      // Get all anchors and add the click event
      var $anchors = $('.size-anchor');
      $anchors.click(function (element) { // https://api.jquery.com/click/
        $clickedElement = $(element.target);

        // Change title
        $anchorListTitle.text('SIZE -- (Clicked) --> ' + $clickedElement.text()); // https://api.jquery.com/text/

        // Remove border for all anchors and add to the clicked element
        $anchors.css('border', 'none');
        $clickedElement.css('border', '1px solid red');
      });
    });
  </script>

我在评论中添加了一些有用的jQuery文档页面的链接。请注意，您还可以使用jQuery中的addClass和removeClass函数来使用类而不是css，这样可以避免在html中对css进行硬编码，并且无需使用$selectedAnchor.css('border', '1px solid #2D4274');。

另请注意，添加点击事件也适用于<a>。

的其他元素

我希望这对你有用。

单击按钮，然后显示所选值

7 个答案: