Question

我正在构建我的投资组合。我想做什么：

我想让我的用户提出问题＆＃39;通过单击一个div链，取决于每个div被点击，然后连接到该div的可能选项将突出显示，并且当询问问题时，将出现取决于特定链的答案（什么类型的答案不重要）。

所以，如果我有5个div：

<div class="what">What</div>
<div class="would">Would</div>
<div class="like">Like</div>
<div class="you">You</div>
<div class="i">I</div>

我的用户点击＆＃39; div，＆＃39;将＆＃39; div突出显示（添加一个类），如果然后点击，＆＃39; 和＆＃39;我＆＃39; div会突出显示，依此类推。这将使我的用户能够根据点击的原始单词/ div以及我选择了哪些单词来联系＆＃39;到那个词/ div。

然后我希望能够使用特定的字符串（单词）来使函数变得有趣，附加一个类等。那么问题＆＃39;什么＆＃39; ，＆＃39;会＆＃39; ，＆＃39;你＆＃39; 和＆＃39;喜欢＆＃39; 作为一个例子显示可供选择的3个句子，但＆＃39; What＆＃39; ，＆＃39;会＆＃39; ，＆＃39;我＆＃39; 和＆＃39;赞＆＃39; 会，作为一个例子展示了热狗或某种形式的图片。

我确实知道一些JavaScript，但是更多jQuery，所以如果可能的话，我更愿意使用那种语言。我知道这个问题有点复杂，我没有包含任何代码，但我真的不知道如何解决这个问题。

Answer 1

我不明白你的问题。也许是这样的？

  <style type="text/css">
        .highlighted{
    background-color:yellow;
    }
    </style>
    <script type="text/javascript">
        $(document).ready(function(){
        $(".test").click(function(){
            var id = this.id ;
            id++;
            if(id>5){
                id =1;
            }
            $( ".test" ).removeClass( "highlighted" );
           $( "#"+id ).addClass( "highlighted" );
        });
    });

    </script>

    <div class="what test" id="1">What</div>
    <div class="would test" id="2">Would</div>
    <div class="like test" id="3">Like</div>
    <div class="you test" id="4">You</div>
    <div class="i test" id="5">I</div>

Answer 2

希望这会有所帮助：

  <style type="text/css">
        .highlighted{
    background-color:yellow;
    }
    .container2 , .container1{
    cursor:pointer;
    margin-bottom: 3%;
    }
    </style>
    <script type="text/javascript">
        $(document).ready(function(){
           $(".Common").click(function(){ 
            var classes = $(this).attr("data"); 

            $( ".highlighted" ).removeClass( "highlighted" );
           $( "."+classes ).addClass( "highlighted" );
        });
    });

    </script>
    <div class="container1">
    <div data="FRUITS" class="Common">FRUITS</div>
    <div data="VEGETABLES" class="Common">VEGETABLES</div>
    <div data="ANIMALS" class="Common">ANIMALS</div>
    <div data="BIRDS" class="Common">BIRDS</div>
    </div>

    <div class="container2" >
        <div class="BIRDS" >Parrot</div>
        <div class="FRUITS" >Apples</div>
        <div class="VEGETABLES" >Cucumber</div>
        <div class="FRUITS" >Oranges</div>
         <div class="VEGETABLES" >Carrot</div>
        <div class="ANIMALS" >Lion</div>
        <div class="BIRDS" >Dove</div>
        <div class="ANIMALS" >Tiger</div>
    </div>

根据单击的文本选项添加类

2 个答案: