单击一个按钮，然后显示选定的值

我想问一下，如果我有一个由无序列表创建的大小选择器，如下图所示。我也写了一些编码，但似乎他们不工作。目前他们不是可点击的，我可以通过配置其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 - （点击） - > SIZE：4？？由于

来源

2017-01-17 Sammi

你为什么要使用花哨的'“'？只需使用'''。改写和格式化OP – Satpal

，其中相应的数字应该显示？ – Banzay

您可以请重新说明这个要求。它还不是很清楚 – brk

在这个片段中显示文本（当您单击li），我把它的title属性和设置的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>

来源

2017-01-17 05:55:30 ab29007

太好了！非常感谢您的帮助！我是一个新的自学习者，所以我没有真正理解他们之前...但你的例子给了我一个非常清晰的结构！谢谢你!!! – Sammi

你能接受答案然后 – ab29007

btw我想问，原来我有一个超链接在h1标签（即尺寸指南）旁边......现在我已经成功地弹出了h1标签中的文本，但超链接将在h1标签显示大小后消失，是h1标签会覆盖链接，因此会隐藏链接？谢谢 – Sammi

您CA使用jQuery添加CSS。我做了一个小片段与div的

$('.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>

来源

2017-01-17 05:58:31

$(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>

来源

2017-01-17 05:59:37 talentedandrew

只是类attribute.Have'nt尝试修正它的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>

来源

2017-01-17 06:05:21

在锚标签或li标签上添加onclick()函数。通过标识功能，您可以根据标识显示尺寸。

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

，或者如果你不想使用，如果条件

来源

2017-01-17 06:07:51

由于您使用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文档页面。请注意，您也可以使用类而不是css使用jQuery中的addClass和removeClass函数，这样可以避免在html中硬编码css，并且无需使用$selectedAnchor.css('border', '1px solid #2D4274');。

另请注意，添加单击事件也可以用于其他元素<a>。

我希望这会对你有用。

来源

2017-01-17 06:19:46

谢谢您的信息！我是jQuery的新自学者，所以我对这些东西感到非常困惑......但现在它正在工作！谢谢 – Sammi

试试这个。添加一个单击事件并向目标元素添加一个类，获取选定选项卡的标题属性。这里添加一个示例代码。这里我使用了一个花哨的字体来表示。此外，我有用户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>

来源

2017-01-17 06:31:36 Nitheesh

这也是工作！谢谢！ – Sammi

单击一个按钮，然后显示选定的值

回答

相关问题