Question

我想为我的网站创建一个翻译按钮，但是到目前为止，我也希望按钮的值能够随着文本的变化而改变，但是我需要使用该按钮来切换div和按钮值

以我最少的代码知识，我感到我的代码在干扰并且因此无法正常工作

$('.orange').hide();
$('.gray p,.orange p').click(function(){
    $('.gray,.orange').toggle();
});
$('#myButton1').click(function(){
    $('#badd').val('SAVE');
}

.blue{
    background:#1ecae3;
    float:left;
}
.gray{
    background:#eee;
    float:left;    
}

.orange{
    background:#fdcb05;
    float:left;     
}

    <input type="button" value="English" id="myButton1" onclick="change()">
    <div class="gray" id="myDIV">
      <p>english</p>
    </div>
    <div class="orange" id="myDIV">
      <p>greek</p>
    </div>

Answer 1

使用jquery时，在onclick事件中不需要按钮。您必须使用切换按钮单击事件，并且ID必须唯一。此代码可以帮助您：

$('.orange').hide();

$('#myButton1').click(function(){
 $('.gray,.orange').toggle();
})
$(".gray").click(function(){
$("#myButton1").prop('value', $(this).text());

})
$(".orange").click(function(){
$("#myButton1").prop('value', $(this).text());

})

.blue{
    background:#1ecae3;
    float:left;
}
.gray{
    background:#eee;
    float:left;    
}

.orange{
    background:#fdcb05;
    float:left;     
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" value="English" id="myButton1" >
    <div class="gray" id="myDIV">
      <p>english</p>
    </div>
    <div class="orange" id="myDIV2">
      <p>greek</p>
    </div>

Answer 2

首先，您可以删除<input>，因为它不需要达到您想要的目的。而是使用具有背景颜色和语言的div作为按钮。

例如：

<div class="gray" id="myDIV">
  <p>english</p>
</div>

第二，永远不要在一个页面上给一个以上的元素提供ID，因此请从这些div中删除id =“ myDiv”，而添加一个类来定义它们，例如languageSelect。 / p>

您还可以使用自定义attribute来定义要切换到jQuery函数的语言。在这种情况下，您可以简单地使用language=""。请注意，除了存储供您在jQuery中使用的值外，这无济于事。

您的HTML应该如下所示：（我还在<p>标签中为每种语言的首字母大写了。）

<div class="gray languageSelect" language="english">
  <p>English</p>
</div>
<div class="orange languageSelect" language="greek">
  <p>Greek</p>
</div>

<div class="englishContentDiv contentDiv">
  English text/elements here.
</div>

<div class="greekContentDiv contentDiv">
  Greek text/elements here.
</div>

对于您的脚本，希望您不会像那样将其添加到页面中吗？您应该将其保存在脚本文件或脚本标签中。

使用jQuery，您可以使用.html（）函数更改任何元素的html。

$(document).ready(function(){
  $('.languageSelect').click(function(){
    if($(this).attr('language') == 'english'){//if user clicked on English, change buttons to English language
      $('.languageSelect[language="english"] p').html('English');
      $('.languageSelect[language="greek"] p').html('Greek');
    }
    if($(this).attr('language') == 'greek'){//if user clicked on Greek, change buttons to Greek language
      $('.languageSelect[language="english"] p').html('Αγγλικά');
      $('.languageSelect[language="greek"] p').html('Ελληνικά');
    }
  });  
});

此代码现在将更改div中的文本。

您可以将其添加到CSS：

.languageSelect{
  cursor: pointer;
}

现在，您将需要它来更改页面上任何其他元素的语言，而又看不到HTML或所做的任何其他事情，我对此无能为力。

但是它将在您的$('.languageSelect').click(function(){内，您可以根据单击的内容来显示/隐藏英语/希腊语。

$(document).ready(function(){
  $('.languageSelect').click(function(){
    if($(this).attr('language') == 'english'){//if user clicked on English, change buttons to English language
      $('.languageSelect[language="english"] p').html('English');
      $('.languageSelect[language="greek"] p').html('Greek');
      
      $('.contentDiv').hide();//hide any other language
      $('.englishContentDiv').show();//show English content
    }
    if($(this).attr('language') == 'greek'){//if user clicked on Greek, change buttons to Greek language
      $('.languageSelect[language="english"] p').html('Αγγλικά');
      $('.languageSelect[language="greek"] p').html('Ελληνικά');
      
      $('.contentDiv').hide();//hide any other language
      $('.greekContentDiv').show();//show Greek content
    }
  });  
});

.blue{
    background:#1ecae3;
    float:left;
}
.gray{
    background:#eee;
    float:left;    
}

.orange{
    background:#fdcb05;
    float:left;     
}

.languageSelect{
  cursor: pointer;
  margin-right: 10px;
  padding: 5px;
}
.contentDiv{
  display: none;
}
.clearfix{
  clear: both;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="gray languageSelect" language="english">
  <p>English</p>
</div>
<div class="orange languageSelect" language="greek">
  <p>Greek</p>
</div>
<div class="clearfix"></div>
<div class="englishContentDiv contentDiv">
  English text/elements here.
</div>

<div class="greekContentDiv contentDiv">
  Greek text/elements here.
</div>

如何制作一个更改值和文本的按钮

2 个答案: